transform attribute in CSS-CSS Tutorial-php.cn

transform attribute in CSS

高洛峰

Release： 2017-02-14 15:29:41

Original

2458 people have browsed it

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.

CSS中transform 属性

##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;

Copy after login

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是变形的值 .  */

Copy after login

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);

Copy after login

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);

Copy after login

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) */

Copy after login

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) */

Copy after login

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) */

Copy after login

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

Tilt

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

Copy after login

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) */

Copy after login

Tilt at a specified angle around the X axis

Tilt in the Y direction

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

Copy after login

Tilt around the Y-axis at a specified angle

Translation

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

Copy after login

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 */

Copy after login

在X轴平移指定距离

Y方向平移

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

Copy after login

在Y轴平移指定距离

浏览器兼容性

CSS中transform 属性

提示

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

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

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

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

transform attribute in CSS