#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.
CSS transform
Demo of the different values of the transform property.
Click the property values below to see the
result:
Play more with the code in our Tryit yourself editor:
Try it Yourself ❯