linkedin github twitter
T
R
A
N
S
F
O
R
M
rotateX(45deg)
rotateY(45deg)
rotateZ(45deg)
skewX(15deg)
skewY(45deg)
skew(15deg, 45deg)
scaleX(0.75)
scaleY(0.75)
scaleZ(0.75)
Give your CSS depth using the transform property.
Note: This does not work on inline elements.
rotate
rotate(angle) 2D rotation of the element
rotateX(angle) 3D rotation along the x-axis
rotateY(angle) 3D rotation along the y-axis
rotateZ(angle) 3D rotation along the z-axis
rotate3d(x, y, z, angle) 3D rotation along the x, y and z axes
skew
skew(x-angle, y-angle) 2D skew of the element along the x and y axes
skewX(angle) 2D skew along the x-axis
skewY(angle) 2D skew along the y-axis
scale
scale(x, y) 2D scale of the element along the x and y axes
scaleX(x) 2D scale along the x-axis
scaleY(y) 2D scale along the y-axis
scaleZ(z) 3D scale along the z-axis
scale3d(x, y, z) 3D scale along the x, y and z axes.
translate
translate(x,y) 2D movement of the element along the x and y axes
translateX(x) 2D movement along the x-axis
translateY(y) 2D movement along the y-axis
translateZ(z) 3D movement along the z-axis
translate3d(x,y,z) 3D movement along the x, y and z axes
matrix
matrix(n,n,n,n,n,n) All the 2D values above are internally converted to a matrix.
You probably don't need to use it.
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Same as matrix but for 3D transforms.