CSS3 allows your to translate, skew, scale, and rotate elements.

This puzzle demonstrates the rotate function using CSS3, and a tiny bit of jQuery.

To get your elements to rotate, simply add the following CSS to the element:

transform: rotate(45deg);
-moz-transform: rotate(45deg);  /* Firefox 4 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-o-transform: rotate(45deg); /* Opera */

If you want to have a cool transition effect when your element gets rotated, then add a transition duration.

transition-duration: 0.2s;
-moz-transition-duration: 0.2s; /* Firefox 4 */
-webkit-transition-duration: 0.2s; /* Safari and Chrome */
-o-transition-duration: 0.2s; /* Opera */

transition-timing-function: linear;
-moz-transition-timing-function: linear; /* Firefox 4 */
-webkit-transition-timing-function: linear; /* Safari and Chrome */
-o-transition-timing-function: linear; /* Opera */


Related Chatter