1. CSS3 TransformsMore than meets the eye!

2. Old-school transitions were done withJavaScript and dynamic HTML! 3. As of CSS3 we can now alter DOMelements with styles We can change location (move) angle (rotate) size (scale) distortion (skew) 4. Scaling: height and width#theDiv {! height: 10px;! width: 10px;!}!#theDiv:focus {! height: 100px;! width: 100px;!}! 5. Hands-on scalingDemo: size 6. Locationdiv.move {! width: 50px;! height: 50px;! padding: 10px;! margin-left: 0px;!}!div.move:hover {! margin-left: 400px;!} ! 7. Hands-on location transformsDemo: location 8. Rotation@-webkit-keyframes spinnerRotate {!!from {!!!-webkit-transform:rotate(0deg);!!}!!to {!!!-webkit-transform:rotate(360deg);!!}!}! 9. Demo: A Hands-on rotationspinner 10. Color#theDiv { background-color: #eee; color: white; border-radius: 5px;}!#theDiv:hover { background-color: #f00;}! 11. TextFont-sizeFont-weight 12. Demo: color andcolor and textHands-on text 13. Conclusion Transformscan make our sites come alive What used to require JavaScript can now bedone with simple styles We can transform location, scale, rotation,color, fonts, and more 14. Further study Cool articles on transforms http://www.css3.info/preview/css3-transitions/ http://24ways.org/2009/going-nuts-with-css- transitions