transform attribute in CSS

The transform attribute in CSS allows you to modify the coordinate space of the CSS visual model. Through transform, elements can be moved (translate), rotated (rotate), scaled (scale), and tilted (skew).

If this property has a non-none value, a stacking context will be generated. In this case the object will serve as a containing block for the position: fixed element it contains.

##Syntax

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

transform: []* | none

Vendor prefixes: If you need to use this feature, please check the browser compatibility list for the prefixes of each browser vendor.

Value

At least one CSS transform functions is applied, please see the example below.

none

Specify not to apply transform

Example

View Using CSS transforms.

Standard syntax (Formal syntax)

How to read CSS syntax.

none

Example

See Using CSS transforms.

Online example

HTML Content

Transformed element

CSS Content

p { border: solid red; -webkit-transform: translate(100px) rotate(20deg); -webkit -transform-origin: 0 -250px; transform: translate(100px) rotate(20deg); transform-origin: 0 -250px; }

CSS transform function

The transform attribute allows you to use the transform function to achieve deformation effects in the coordinate system used by the element. These functions are described below:

matrix(matrix)

transform:  matrix(a, c, b, d, tx, ty)/* a, b, c, d 创建了变形矩阵 
   ┌     ┐ 
   │ a b │
   │ c d │
   └     ┘
   tx, ty是变形的值 .  */

Specifies 6 values ​​​​in a two-dimensional matrix, which is equivalent to using the matrix matrix [a b c d tx ty].

Note: Gecko (Firefox) accepts a value for tx and ty.

Webkit (Safari, Chrome) and Opera currently support a unitless for tx and ty.

Online examples

background: gold;  width: 30em;
 
   -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);-webkit-transform: matrix(1, -0.2, 0, 1, 0, 0);
     -o-transform: matrix(1, -0.2, 0, 1, 0, 0);
    -ms-transform: matrix(1, -0.2, 0, 1, 0, 0);
        transform: matrix(1, -0.2, 0, 1, 0, 0);

rrree

See also

Examples of linear transformation matrices Wikipedia

Coordinate transformation matrices mathamazement.com

Microsoft's matrix filter MSDN

Rotation

background: wheat;max-width: intrinsic;
 
   -moz-transform: matrix(1, 0, 0.6, 1, 15em, 0);-webkit-transform: matrix(1, 0, 0.6, 1,  250, 0);
     -o-transform: matrix(1, 0, 0.6, 1,  250, 0);
    -ms-transform: matrix(1, 0, 0.6, 1,  250, 0);
        transform: matrix(1, 0, 0.6, 1,  250, 0);

Rotate the element clockwise by a specific angle starting from the origin (specified by the transform-origin attribute). The matrix of this operand is [cos(angle) sin(angle) -sin(angle) cos(angle) 0 0] .

Scale

transform:  rotate(angle);       /* an <angle>, e.g.  rotate(30deg) */

Specifies a two-dimensional scaling operation described by [sx, sy]. If sy is not specified, it defaults to the same value as sx.

X-direction scaling

transform:  scale(sx[, sy]);     /* one or two unitless <number>s, e.g.  scale(2.1,4) */

Use vector [sx, 1] to complete scaling in the X-direction.

Y-direction scaling

transform:  scaleX(sx);          /* a unitless <number>, e.g.  scaleX(2.7) */

Use vector [1, sy] to complete the scaling in the Y direction.

Tilt

transform:  scaleY(sy)           /* a unitless <number>, e.g.  scaleY(0.3) */

The elements are on the X-axis and Y-axis The direction is tilted at the specified angle. If ay is not provided, there is no tilt on the Y axis.

Tilt in the X direction

transform:  skew(ax[, ay])       /* one or two <angle>s, e.g.  skew(30deg,-10deg) */

Tilt at a specified angle around the X axis

Tilt in the Y direction

transform:  skewX(angle)         /* an <angle>, e.g.  skewX(-30deg) */

Tilt around the Y-axis at a specified angle

Translation

transform:  skewY(angle)         /* an <angle>, e.g.  skewY(4deg) */

Specifies a 2D translation by the vector [tx, ty]. If ty isn't specified, its value is assumed to be zero.

用向量[tx, ty]完成2D平移。如果ty没有指定，它的值默认为0。

X方向平移

transform:  translateX(tx)       /* see <length> for possible values */

在X轴平移指定距离

Y方向平移

transform:  translateY(ty)       /* see <length> for possible values */

在Y轴平移指定距离

浏览器兼容性

提示

IE5或以上版本支持 Matrix Filter 属性完成相同的效果。

在IE9中，使用jQuery动态添加样式，不显示效果，其他浏览器显示正常。是因为IE9认为 -ms-transform是无效的脚本，不执行。请将 "-ms-transform"改为“msTransform”。

更多CSS中transform 属性相关文章请关注PHP中文网！