CSS Tranforms

Rotate

transform: rotate(-20deg);
I'm rotated 20 degrees.

 

 

Scale

 

transform: scale(2);

 

I'm scaled 200%
transform: scaleX(2);
I'm scaled horizontally
transform: scaleY(2);

 

I'm scaled vertically
transform: scale(1.5, 0.8);
I'm scaled both ways

 

Skew

transform: skewX(25deg);
I'm skewed horizontally
transform: skewY(10deg);

 

I'm skewed vertically

Translate

transform: translateX(300px);
I'm translated 300px horizontally
transform: translateY(100px);
I'm translated 100px vertically

 

 

Matrix

transform: matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824);
Strange things are afoot at the Circle-K.

 

 

The Matrix Resolutions

CSS Tricks: Transform

CSS Transitions

transition: background-color 0.5s ease;
Hover over this

CSS Tricks: Transition

Keyframe Animation

CSS Tricks: Keyframe Animation Syntax