joe92 Posted May 6, 2011 Share Posted May 6, 2011 The below is some test code to try rotation of divs, it just does not work for sudo classes .div1{ text-align:center; width:5em; height:5em; border-right:solid 1px #000; border-left:solid 1px #000; background-colour:#FFF; } .div1:hover { -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); -ms-transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2.25); /* <-- IE8 and below */ } The rotation will work if I apply it on load to only the div, no sudo class. So, I could have two divs with the same content, one rotated and the other not. Then use javascript to show one and hide the other on mouseover. Anyone know how to make this work with CSS though? Cheers, Joe. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 6, 2011 Share Posted May 6, 2011 what do you mean with sudo classes? as far as i know sudo is a linux commandline stuff. Quote Link to comment Share on other sites More sharing options...
joe92 Posted May 6, 2011 Author Share Posted May 6, 2011 Sorry, I meant to put Pseudo-classes. Typo. And I cant edit my OP which is quite annoying Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 6, 2011 Share Posted May 6, 2011 ah that's makes more sense well hover should work, try the stuff below out. by the way there are quite some articles about this on the internet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>rotate shit</title> <style type="text/css"> .div1{ width:5em; height:5em; background:#F4a; /* spelling error its color not colour */ } .div1:hover { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); } </style> </head> <body> <div class="div1"> </div> </body> </html> p.s. you made a spelling error in your background color declaration. Quote Link to comment Share on other sites More sharing options...
joe92 Posted May 6, 2011 Author Share Posted May 6, 2011 Yeah, it was from some of the articles why I decided to start trying it out. Thanks for the code, works now. Don't know what was different between mine and yours, must of made an error in the html somewhere. And the spelling mistake wasn't too important as I was on a white background Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 6, 2011 Share Posted May 6, 2011 Yeah, it was from some of the articles why I decided to start trying it out. Thanks for the code, works now. Don't know what was different between mine and yours, must of made an error in the html somewhere. And the spelling mistake wasn't too important as I was on a white background 360 degrees / 2 = 180, if you have a square with a solid color, you will not notice any difference when you rotate it 90 degrees or a multiple amount of that such as 180 360 540 etc It's almost the same as having a square paper and turning it and asking what the difference is. Quote Link to comment Share on other sites More sharing options...
joe92 Posted May 6, 2011 Author Share Posted May 6, 2011 Haha, I may have made a simple error in the html but I did't miss that I had 'hello' written in the center of the div. <div class="div1"> Hello </div> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 6, 2011 Share Posted May 6, 2011 Haha, I may have made a simple error in the html but I did't miss that I had 'hello' written in the center of the div. <div class="div1"> Hello </div> hehe good one, i thought i tell you because you also had a border left and right with the same color so a 180 degree turn would make no difference Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.