Demo: CSS Transforms

Check out the different transform types below!

transform: none

transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)

transform: matrix3d(1.0, 2.0, 3.0, 4.0, 1.0, 2.0, 3.0, 4.0, 1.0, 2.0, 3.0, 4.0, 1.0, 2.0, 3.0, 4.0)

transform: rotate(0.5turn)

transform: rotateX(3deg)

transform: rotateY(3deg)

transform: rotateZ(3deg)

transform: rotate3d(1, 2.0, 3.0, 3deg)

transform: scale(3, 3.5)

transform: scaleX(3)

transform: scaleY(0.6)

transform: scaleZ(0.9)

transform: scale3d(2.5, 1.2, 0.3)

transform: skewX(44deg)

transform: skewY(1.9rad)

transform: translate(12px, 20%)

transform: translateX(5em)

transform: translateY(1in)

transform: translateZ(4px)

transform: translate3d(40px, 20%, 5em)

transform: perspective(40px)