1. Home
  2. CSS3 transform property

The best CSS3 transform property Tutorial In 2024, In this tutorial you can learn Examples,Browser Support,Attribute definitions and instructions,grammar,More examples,

CSS3 transform property

Examples

Rotation div element:

div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}

Browser Support

Figures in the table represent the first browser to support the version number of the property.

Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.

属性
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-

Attribute definitions and instructions

2D Transform property is applied to the element or 3D conversion. This property allows you to elements rotate, zoom, move, tilt, and so on.

To better understand the Transform properties, see the online instance .

Defaults: none
inherit: no
version: CSS3
JavaScript syntax: object .style.transform = "rotate (7deg)"

grammar

transform:none | transform-functions;

value description
none Definition does not convert.
matrix (n, n, n,n, n, n) Define 2D conversion, using a matrix of six values.
matrix3d (n, n, n,n, n, n, n, n, n, n, n, n, n, n, n, n) 3D conversion defined using 16 values ​​4x4 matrix.
translate(x, y) Define the 2D conversion.
translate3d(x, y, z) Define 3D conversion.
translateX(x) Definition of conversion, but with the value of the X-axis.
translateY(y) Definition of conversion, but with the value of the Y-axis.
translateZ(z) Define 3D conversion, but with the value of Z axis.
scale (x [, y]?) Define 2D scale transformation.
scale3d(x, y, z) Define 3D scale transformation.
scaleX(x) By setting the value of the X axis to define the scale transformation.
scaleY(y) By setting the value of the Y axis to define the scale transformation.
scaleZ(z) To define the 3D scale transformation by setting the value of the Z axis.
rotate(angle) Define 2D rotated a predetermined angle in the argument.
rotate3d (x, y, z,angle) Define 3D rotation.
rotateX(angle) 3D X is defined along the shaft.
rotateY(angle) 3D Y axis is defined along the rotation.
rotateZ(angle) 3D Z-axis is defined along the rotation.
skew (x-angle, y-angle) Defined along the 2D X and Y-axis skew transformation.
skewX(angle) 2D X-axis is defined along the inclination of the conversion.
skewY(angle) Defined along the Y-axis skew transformation 2D.
perspective(n) 3D conversion element to define a perspective view.

Examples

More examples

Rotate a picture
This example demonstrates how to create a "polaroid" photos and rotate pictures.

Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS3 transform property
10/30