CSS3 Transforms and Transitions

Transforms

The transform property lets you scale, rotate, translate, or skew any element. With the translation function allows you to move elements up, down, left, or right. A translated element moves relative to its current position. translate(x,y) moves element x from the left, and y from the top.

Do you want to dance?

Scaling

Elements are scaled horizontally then vertically. scale(x,y) scale(1) would leave the element the same size. scale(2) would double the size, scale(0.5) would halve the size.

Smile! It's going to be a good day.

Rotation

The rotate function rotates an element around a point using an angle value. Positive values move elements clockwise and negative values move the element counterclockwise.

Turnaround.

Skew

With skew, you can skew an element on the x and y axis. skew(x,y)

AskewedPerspective

Transitions

1. Declare the original state of the element
2. Declare the final state
3. Use transition properties: transition-property, transition-duration, transition-timing-function, transition-delay

Here is an example of a transition.

You can have multiple transitions in one call, like changing the color as well as rotation and size.

I want to be blue!

Animations

Animations allow you to control each step of an element animation using keyframes. Specify CSS styles inside the @keyframes rule.