css transformation effect

  • (2 Pages)
  • +
  • 1
  • 2

22 Replies - 1071 Views - Last Post: 29 June 2013 - 03:48 AM

#1 movarind  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-June 13

css transformation effect

Posted 28 June 2013 - 11:00 PM

i attached pictures check my coding out .The transformation effect is not being applied can anyone give me some tips on what i am doing wrong thanks.

Attached image(s)

  • Attached Image
  • Attached Image

Is This A Good Question/Topic? 0
  • +

Replies To: css transformation effect

#2 travesty  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 67
  • Joined: 04-June 13

Re: css transformation effect

Posted 28 June 2013 - 11:48 PM

Not a CSS expert, but try adding
-ms-transform:rotate(360deg);
-webkit-transform:rotate(360deg);



p.s. the <center> tag is depreciated, just add a class to the <h1> or put a div around it and add the centering in CSS.
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: css transformation effect

Posted 28 June 2013 - 11:53 PM

Hey.

Please post your code into your posts using [code] tags, rather than attaching them as images. Easier to read that way.

I can't see why that wouldn't be working. Are there any other transformation styles being applied in other CSS blocks? Are you sure you are using a browser that supports CSS3 transformations? - You can see a compatibility table at the bottom of this article:
- transform - CSS | MDN

A few of other things that should be pointed out about that code:

  • All non-zero units in CSS should have a unit type specified. Like px or em. Your font-size style is missing the unit type, and is thus invalid.

  • CSS blocks inherit values from previous blocks. That means that if you are changing one property of elements that have been previously styled, you only have to set the properties that are being changed. This includes :hover pseudo classes. - In your case, the only style you need to set in your hover class is the transform style. The others will be inherited from the main block.

  • The <center> element is ancient and should not be used these days. Use CSS to style, not HTML. A text-align: center; on the .global > h1 selector would do the same job, without using this ancient tag.

This post has been edited by Atli: 28 June 2013 - 11:56 PM

Was This Post Helpful? 0
  • +
  • -

#4 movarind  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-June 13

Re: css transformation effect

Posted 29 June 2013 - 12:41 AM

View PostAtli, on 28 June 2013 - 11:53 PM, said:

Hey.

Please post your code into your posts using [code] tags, rather than attaching them as images. Easier to read that way.

I can't see why that wouldn't be working. Are there any other transformation styles being applied in other CSS blocks? Are you sure you are using a browser that supports CSS3 transformations? - You can see a compatibility table at the bottom of this article:
- transform - CSS | MDN

A few of other things that should be pointed out about that code:

  • All non-zero units in CSS should have a unit type specified. Like px or em. Your font-size style is missing the unit type, and is thus invalid.

  • CSS blocks inherit values from previous blocks. That means that if you are changing one property of elements that have been previously styled, you only have to set the properties that are being changed. This includes :hover pseudo classes. - In your case, the only style you need to set in your hover class is the transform style. The others will be inherited from the main block.

  • The <center> element is ancient and should not be used these days. Use CSS to style, not HTML. A text-align: center; on the .global > h1 selector would do the same job, without using this ancient tag.

i am using <center> becuse <text align="center"> wont work for some reason, im really new to html n css this is my first website

i cant find another way to do it i tried -moz- and -webkit- wont work..
Was This Post Helpful? 0
  • +
  • -

#5 movarind  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-June 13

Re: css transformation effect

Posted 29 June 2013 - 12:49 AM

in my HTML file the way/place i put the <div class="global"> is it right ?
And do i need to put the hover class?
Was This Post Helpful? 0
  • +
  • -

#6 travesty  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 67
  • Joined: 04-June 13

Re: css transformation effect

Posted 29 June 2013 - 12:51 AM

Not sure what to do for the transform part, but for the centering thing do this
<h1 class="center">Global Accounting</h1>



Then in your css have this
h1.center {
text-align:center;
}



View Postmovarind, on 29 June 2013 - 12:49 AM, said:

in my HTML file the way/place i put the <div class="global"> is it right ?
And do i need to put the hover class?

It looks alright to me. You could try using id instead of class. I've had some weird things that only worked with id and vice versa.
Was This Post Helpful? 1
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: css transformation effect

Posted 29 June 2013 - 12:53 AM

View Postmovarind, on 29 June 2013 - 07:41 AM, said:

i am using <center> becuse <text align="center"> wont work for some reason

There is no <text> element in HTML. What I was suggesting was the text-align CSS style, not a HTML element with an align attribute. - Like I say, you should not use HTML elements to style the page. That's what CSS is for.

View Postmovarind, on 29 June 2013 - 07:41 AM, said:

i cant find another way to do it i tried -moz- and -webkit- wont work..

Why don't you post your whole code here - inside [code] tags - so we can see what you've done.

Also, what browser are you using to test this in?
Was This Post Helpful? 0
  • +
  • -

#8 movarind  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-June 13

Re: css transformation effect

Posted 29 June 2013 - 12:58 AM

<html>
    <head>
    <link rel="shortcut icon" href="favicon.ico" >
         <title>Global Accounting </title>
         <LINK rel="stylesheet" type="text/css" href="style.css">
               <style>
body {background-image:url('background.jpg');}
</style>      
     </head>
        
     <body>

   <a href="Home.html" style="color:black " class="button">Home </a>  &nbsp;| <a href="contact us.html"style="color:black" class="button">Contact us</a> | <a href="About us.html"style="color:black "class="button">About us</a>
    

   
     <h1 class="center"> <div class="global"> Global Accounting</h1>  
     </div>
     
        <div align="center">
        
        <div class="center2">
        
        
        <img src="global new logo1.jpg"  align="middle">
        <p><text align="center">Global Accounting is an accounting service</p>
        </div>
        
        <br>
                
        
       <br><br> 
        &copy; 2013 Global Accounting - All Rights Reserved
     </body>
        
</html>            




.global{
        background:#66cdaa;
        font-size:20;
        margin:50px;
        padding:10px
        }
.global:hover{
              -moz-transform: rotate(360deg);
              -webkit-transform: rotate(360deg);
               transform: rotate(360deg);
              
}
              
h1.center{
           text-align="center";
}           

Was This Post Helpful? 0
  • +
  • -

#9 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: css transformation effect

Posted 29 June 2013 - 12:59 AM

View Posttravesty, on 29 June 2013 - 07:51 AM, said:

Not sure what to do for the transform part, but for the centering thing do this
<h1 class="center">Global Accounting</h1>



Then in your css have this
h1.center {
text-align:center;
}


There really isn't any need for that class, though. He may as well leave the HTML unaltered and use the selector I suggested in my first post:
.global > h1 {
    text-align: center;
}


Now you don't have a "center" class floating around, potentially altering the styles of other H1 elements using a center class for other purposes. (Overuse of generic class names can be a nightmare in large projects.)
Was This Post Helpful? 0
  • +
  • -

#10 travesty  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 67
  • Joined: 04-June 13

Re: css transformation effect

Posted 29 June 2013 - 01:07 AM

Yeah, I guess your right. So just add the "text-align:center;" to the global class.

View Postmovarind, on 29 June 2013 - 12:58 AM, said:

     <h1 class="center"> <div class="global"> Global Accounting</h1>  
     </div>



I think it would be better to have the div outside of the <h1>. It might not make a difference, but its just good practice.
Was This Post Helpful? 0
  • +
  • -

#11 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: css transformation effect

Posted 29 June 2013 - 01:14 AM

A rather obvious thought just struck me. 360 degrees is a full circle. So if you rotate it 360 degrees, it ends up exactly where it started. It was probably working the whole time, the effect just doesn't have any visible change.

Also, the HMTL is a mess. Run it through the W3C Validator and try to fix all the errors it highlights. Most importantly, it's missing a Doctype Declaration, which is a required part of all HTML documents.

Your CSS text-align is still wrong. Compare the difference between how you do it, and how me and travesty did it. Your version will cause an error.

P.S.
If you are looking to see it rotate 360 degrees in, say, a couple of seconds, then you want to look into CSS Animations as well. Transformations alone won't do that.
Was This Post Helpful? 0
  • +
  • -

#12 movarind  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-June 13

Re: css transformation effect

Posted 29 June 2013 - 01:36 AM

View PostAtli, on 29 June 2013 - 01:14 AM, said:

A rather obvious thought just struck me. 360 degrees is a full circle. So if you rotate it 360 degrees, it ends up exactly where it started. It was probably working the whole time, the effect just doesn't have any visible change.

Also, the HMTL is a mess. Run it through the W3C Validator and try to fix all the errors it highlights. Most importantly, it's missing a Doctype Declaration, which is a required part of all HTML documents.

Your CSS text-align is still wrong. Compare the difference between how you do it, and how me and travesty did it. Your version will cause an error.

P.S.
If you are looking to see it rotate 360 degrees in, say, a couple of seconds, then you want to look into CSS Animations as well. Transformations alone won't do that.


im new to html so going to be a mess just put what i lernt and threw it in..
the css still wont work
Was This Post Helpful? 0
  • +
  • -

#13 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: css transformation effect

Posted 29 June 2013 - 01:48 AM

View Postmovarind, on 29 June 2013 - 08:36 AM, said:

im new to html so going to be a mess just put what i lernt and threw it in..

No offence, but the proper structure of a HTML document should be the first thing you do learn. It's actually extremely simple:
<!DOCTYPE html>
<head>
    <title>The title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
    <h1>Contents go here!</h1>
</body>
</html>


That's a fairly standard HTML skeleton; how all HTML documents should start out. Then customize the <head> as needed and add the content to the <body>.

You also need make sure the tags add up; that opening and closing tags match (if a closing tag is needed, that is), and they aren't "out of sync", so to speak:
<!-- Bad! -->
<h1><span>Stuff</h1></span>

<!-- Good -->
<h1><span>Stuff</span></h1>


Adopting and consistently using a good coding style helps enormously with that.

View Postmovarind, on 29 June 2013 - 08:36 AM, said:

the css still wont work

Define "wont work". We can't help you if we don't know what your current code looks like; what changes you've made.
Was This Post Helpful? 0
  • +
  • -

#14 movarind  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 28-June 13

Re: css transformation effect

Posted 29 June 2013 - 01:59 AM

View PostAtli, on 29 June 2013 - 01:48 AM, said:

View Postmovarind, on 29 June 2013 - 08:36 AM, said:

im new to html so going to be a mess just put what i lernt and threw it in..

No offence, but the proper structure of a HTML document should be the first thing you do learn. It's actually extremely simple:
<!DOCTYPE html>
<head>
    <title>The title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
    <h1>Contents go here!</h1>
</body>
</html>


That's a fairly standard HTML skeleton; how all HTML documents should start out. Then customize the <head> as needed and add the content to the <body>.

You also need make sure the tags add up; that opening and closing tags match (if a closing tag is needed, that is), and they aren't "out of sync", so to speak:
<!-- Bad! -->
<h1><span>Stuff</h1></span>

<!-- Good -->
<h1><span>Stuff</span></h1>


Adopting and consistently using a good coding style helps enormously with that.

View Postmovarind, on 29 June 2013 - 08:36 AM, said:

the css still wont work

Define "wont work". We can't help you if we don't know what your current code looks like; what changes you've made.

i took the css transform out because i need to fix all my other errors the website you gave me found 24 errors on that one page i feel useless !! i really love coding and networking but still got a long way im 15
Was This Post Helpful? 0
  • +
  • -

#15 travesty  Icon User is offline

  • D.I.C Head

Reputation: 6
  • View blog
  • Posts: 67
  • Joined: 04-June 13

Re: css transformation effect

Posted 29 June 2013 - 02:03 AM

View Postmovarind, on 29 June 2013 - 01:59 AM, said:

View PostAtli, on 29 June 2013 - 01:48 AM, said:

View Postmovarind, on 29 June 2013 - 08:36 AM, said:

im new to html so going to be a mess just put what i lernt and threw it in..

No offence, but the proper structure of a HTML document should be the first thing you do learn. It's actually extremely simple:
<!DOCTYPE html>
<head>
    <title>The title</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
    <h1>Contents go here!</h1>
</body>
</html>


That's a fairly standard HTML skeleton; how all HTML documents should start out. Then customize the <head> as needed and add the content to the <body>.

You also need make sure the tags add up; that opening and closing tags match (if a closing tag is needed, that is), and they aren't "out of sync", so to speak:
<!-- Bad! -->
<h1><span>Stuff</h1></span>

<!-- Good -->
<h1><span>Stuff</span></h1>


Adopting and consistently using a good coding style helps enormously with that.

View Postmovarind, on 29 June 2013 - 08:36 AM, said:

the css still wont work

Define "wont work". We can't help you if we don't know what your current code looks like; what changes you've made.

i took the css transform out because i need to fix all my other errors the website you gave me found 24 errors on that one page i feel useless !! i really love coding and networking but still got a long way im 15

I'm 13. You'll get the hang of it eventually. Try to look for more recent tutorials and articles so you won't be using depreciated tags and stuff.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2