Share
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 */
