2D Transform
The Syntax
selector {
transform: value(# or deg);}
Values:
Rotate:
this allows you to rotate an element or image out of its default position by a number of degrees. This can be a positive or negative value.
Scale:
this allows you to resize an image or element. This is more helpful in conjuction with an animation than by itself.
SkewX:
this distorts the shape of your element along the x-axis.
SkewY:
this distorts the shape of your element along the y-axis.
Translate:
this moves your element along the x or y axis.
Matrix:
allows you to combine the different transform values together. Matrix uses 6 values that represent the different transform values.
3D Transform
3D transformations create an illusion of 3-dimensional space by utilizing the
z-axis in conjuction with the
x-axis and
y-axis. By themselves, 3D transformations look very flat. However, combining them with animation or transitions does create a 3-dimensional effect. Keep in mind that 3D transformations are not as widely supported as 2D tranformations.
The Syntax
selector {
transform: value(# or deg);}
Values:
RotateX:
this flips your element along the horizontal axis.
RotateY:
this flips your element along the vertical axis.
RotateZ:
this moves the element along the z-axis.
Rotate3d:
this allows you to rotate along each axis.
More
Additional values include: matrix3d, translate3d, translateX, translateY, translateZ, scale3d, scaleX, scaleY, scaleZ, and perspective
Additional properties include: transform-origin, transform-style, perspective, perspective-origin and backface-visibility