#blueDIV
transform
420
none|
rotate(10deg)|
rotate(45deg)|
rotate3d(1, 2, 1, 45deg)|
rotate3d(0, 1, 0, 60deg)|
rotateX(45deg)|
rotateX(100deg)|
rotateY(45deg)|
rotateY(80deg)|
rotateZ(45deg)|
rotateZ(90deg)|
skew(20deg,20deg)|
skew(30deg,30deg)|
skewX(30deg)|
skewX(40deg)|
skewY(30deg)|
skewY(40deg)|
translate(20px,10px)|
translate(20px,20px)|
scale(2,2)|
scale(2.5,3)|
scaleX(1.5)|
scaleX(50%)|
scaleY(1.5)|
scaleY(50%)|
matrix(0.866,0.7,-0.8,0.866,0,0)|
matrix(0.586,0.8,-0.8,0.586,0,0)|
matrix(0.586,0.8,-0.8,0.586,40,30)
See what different transform values does with this blue DIV element.
Demo of the different values of the transform property.