Daybreak Posted February 9, 2010 Report Posted February 9, 2010 I am looking for some help finding how to cleanly rotate (using a fade) large background images in CSS. We're not using flash, which I know would be easier. Does anyone know what would work (js maybe?)? I am designing an architecture site that could use this feature well. Thanks. Steven Quote
virtual Posted February 9, 2010 Report Posted February 9, 2010 Here are 2 which I bookmarked for future reference, don't know if they are exactly what you are looking for as I haven't tried them. Any particular reason for not using Flash, or is it iPad/iPhone related?? http://ma.tt/scripts/randomimage/ http://designm.ag/tutorials/image-rotator-css-jquery/ Quote
PicnicTutorials Posted February 9, 2010 Report Posted February 9, 2010 Here is a start. Something I'm going to work on in the future. This will rotate anything in all. { visibility: inherit; } <br />div {<br />float:left;<br />margin:60px;<br />padding:30px;<br />background:red;<br />filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=-0.50000000, M21=0.50000000, M22=0.86602540);<br />-moz-transform:rotate(30deg);<br />-webkit-transform:rotate(30deg);<br />-o-transform:rotate(30deg);<br />}<br />/* http://www.boogdesign.com/examples/transforms/matrix-calculator.html */<br /> Some Text Some Text Some Text Quote
Daybreak Posted February 9, 2010 Author Report Posted February 9, 2010 I actually meant rotate, not twisting. Thanks for the suggestion Eric, but I actually meant rotate through a series of images, not twisiting an image. We are not using flash because I don't like it for SEO reasons. Any ideas are definitely appreciated. Steven Quote
PicnicTutorials Posted February 9, 2010 Report Posted February 9, 2010 Ahhh.. Just Google "jQuery rotate images" then. Should be a lot. Quote
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.
Note: Your post will require moderator approval before it will be visible.