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
