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);
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