CSS transform

Previous Next

Demo of the different values of the transform property.

Click the property values below to see the result:

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

Play more with the code in our Tryit yourself editor: Try it Yourself ❯