The transform property applies a list of transformation functions to the coordinate system the element renders into — rotate, translate, scale, skew, and 2D/3D matrices. Computed into a single matrix..box {
transform: translate(20px, 10px);
}.box {
transform: rotate(45deg) scale(1.5) translateX(10px);
}min:-360max:360step:1units:px | % | deg | rad | turn | noneThe default value. No transformation is applied.translate()2D translation: translate(x, y?).translateX()Horizontal translation only.translateY()Vertical translation only.translateZ()Translation along Z axis (3D).translate3d()3D translation: translate3d(x, y, z).scale()2D scaling: scale(x, y?).scaleX()Horizontal scaling.scaleY()Vertical scaling.scaleZ()Z-axis scaling (3D).scale3d()3D scaling.rotate()2D rotation by an angle.rotateX()Rotation around the X axis.rotateY()Rotation around the Y axis.rotateZ()Rotation around the Z axis.rotate3d()3D rotation around a vector.skew()2D skew: skew(angleX, angleY?).skewX()Horizontal skew.skewY()Vertical skew.matrix()2D matrix of 6 values.matrix3d()3D matrix of 16 values.perspective()3D perspective.CSS Transforms Module Level 1Editor's DraftW3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
