CSE 102 Lecture 8: CSS Animation - Transformations

• School: Stony Brook University
• Department: Computer Science
• Course: CSE 102
• Professor: Michael Tashbook

Document Summary

Can rotate, relocate, resize, skew html elements in 2d and 3d space. Work on all major browsers w/ standard browser prefixes. When an element transforms, its element box keeps its original position (like with relative positioning) The rotate() function takes an angle specified in positive or negative degrees. By default, the object rotates around its center but this can be changed transform-origin. Use transform-origin property to set the origin point for a transformation. Options: percentage| length| left| center| right| top| bottom: use two keywords/values for transform-origin transform-origin: center top; transform-origin: 50% 0%; transform-origin: 150px 0, all three of the examples of the above are equivalent. Transfomrs position of an element translatex(length) horizontal axis translatey(length) vertical axis translate (translatex, translate) both axes if you only supply one argument to translate() it will only translate along the x axis. Scaling scaling changes the size of an element.