简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO)
Home > Web Front-end > CSS Tutorial > body text

transform attribute in CSS

高洛峰
Release： 2017-02-14 15:29:41
Original
2349 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 , 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 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 , 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 , 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 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 , e.g.  skewX(-30deg) */
Copy after login

Tilt around the Y-axis at a specified angle

Translation

transform:  skewY(angle)         /* an , 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  for possible values */
Copy after login

在X轴平移指定距离

Y方向平移

transform:  translateY(ty)       /* see  for possible values */
Copy after login

在Y轴平移指定距离

浏览器兼容性

CSS中transform 属性

提示

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

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

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

Related labels：
absolute specified elements
source：php.cn
Previous article：CSS style writing order Next article：RHCS uses css_tool command to create HA cluster and create gfs2 cluster file system
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
1
645
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
9
744
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
659
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
0
525
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
616
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！