Topic 12: CSS Transforms

The transform property allows you to rotate, scale, move, and skew elements. This would be helpful if you had an item that you wanted to slide on to the screen or if you wanted something to rotate when it is hovered.

There are many different property values for transforms:

transition properties table

Example

Resources


Similar to transitions, you can use the the pseudo classes :hover or :active. Hover does not work for mobile applications since there is no way to hover on mobile. However, active might work well for pressing links if you need something to occur over a specific duration of time. The best practice is to use Javascript to trigger transforms. You can also use keyframes which will be explained in topic 13: CSS Animations.

Resources



Week 7 Teaching Video

My teaching presentation starts at 0:00 and ends at 11:26.