在此页

• 句法
• 描述
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

<transform-function> CSS data type represents a transformation that affects an element's appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform 特性。

句法

<transform-function> data type is specified using one of the transformation functions listed below. Each function applies a geometric operation in either 2D or 3D.

Matrix transformation

matrix()

Describes a homogeneous 2D transformation matrix.

matrix3d()

Describes a 3D transformation as a 4×4 homogeneous matrix.

Perspective

perspective()

Sets the distance between the user and the z=0 plane.

Rotation

rotate()

Rotates an element around a fixed point on the 2D plane.

rotate3d()

Rotates an element around a fixed axis in 3D space.

rotateX()

Rotates an element around the horizontal axis.

rotateY()

Rotates an element around the vertical axis.

rotateZ()

Rotates an element around the z-axis.

Scaling (resizing)

scale()

Scales an element up or down on the 2D plane.

scale3d()

Scales an element up or down in 3D space.

scaleX()

Scales an element up or down horizontally.

scaleY()

Scales an element up or down vertically.

scaleZ()

Scales an element up or down along the z-axis.

Skewing (distortion)

skew()

Skews an element on the 2D plane.

skewX()

Skews an element in the horizontal direction.

skewY()

Skews an element in the vertical direction.

Translation (moving)

translate()

Translates an element on the 2D plane.

translate3d()

Translates an element in 3D space.

translateX()

Translates an element horizontally.

translateY()

Translates an element vertically.

translateZ()

Translates an element along the z-axis.

描述

Various coordinate models can be used to describe an HTML element's size and shape, as well as any transformations applied to it. The most common is the Cartesian coordinate system , although homogeneous coordinates are also sometimes used.

Cartesian coordinates

In the Cartesian coordinate system, a two-dimensional point is described using two values: an x coordinate (abscissa) and a y coordinate (ordinate). This is represented by the vector notation (x, y) .

In CSS (and most computer graphics), the origin (0, 0) represents the top-left corner of any element. Positive coordinates are down and to the right of the origin, while negative ones are up and to the left. Thus, a point that's 2 units to the right and 5 units down would be (2, 5) , while a point 3 units to the left and 12 units up would be (-3, -12) .

Transformation functions

Transformation functions alter the appearance of an element by manipulating the values of its coordinates. A linear transformation function is described using a 2×2 matrix, like this:

$\left(\begin{array}{cc}a& c\\ b& d\end{array}\right)$

The function is applied to an element by using matrix multiplication. Thus, each coordinate changes based on the values in the matrix:

$\left(\begin{array}{cc}a& c\\ b& d\end{array}\right)\left(\begin{array}{c}x\\ y\end{array}\right)=\left(\begin{array}{c}ax+cy\\ bx+dy\end{array}\right)$

It is even possible to apply several transformations in a row:

$\left(\begin{array}{cc}{a}_1& c_1\\ b_1& d_1\end{array}\right)\left(\begin{array}{cc}{a}_2& c_2\\ b_2& d_2\end{array}\right)=\left(\begin{array}{cc}{a}_1{a}_2+c_1{b}_2& a_1{c}_2+c_1{d}_2\\ b_1{a}_2+d_1{b}_2& b_1{c}_2+d_1{d}_2\end{array}\right)$

With this notation, it is possible to describe, and therefore compose, most common transformations: rotations, scaling, or skewing. (In fact, all transformations that are linear functions can be described.) Composite transformations are effectively applied in order from right to left.

However, one major transformation is not linear, and therefore must be special-cased when using this notation: translation. The translation vector (tx, ty) must be expressed separately, as two additional parameters.

注意： Though trickier than Cartesian coordinates, homogeneous coordinates in projective geometry lead to 3×3 transformation matrices, and can simply express translations as linear functions.

范例

Transform function comparison

The following example provides a 3D cube created from DOM elements and transforms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.

Choose one, and the transform is applied to the cube; after 2 seconds, the cube reverts back to its starting state. The cube's starting state is slightly rotated using transform3d() , to allow you to see the effect of all the transforms.

HTML

<main>
  <section id="example-element">
      <div class="face front">1</div>
      <div class="face back">2</div>
      <div class="face right">3</div>
      <div class="face left">4</div>
      <div class="face top">5</div>
      <div class="face bottom">6</div>
  </section>
  <div class="select-form">
    <label>Select a transform function</label>
    <select>
      <option selected>Choose a function</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>
					

CSS

main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}
#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}
.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: #fff;
}
.front {
    background: rgba(90,90,90,.7);
    transform: translateZ(50px);
}
.back {
    background: rgba(0,210,0,.7);
    transform: rotateY(180deg) translateZ(50px);
}
.right {
  background: rgba(210,0,0,.7);
  transform: rotateY(90deg) translateZ(50px);
}
.left {
  background: rgba(0,0,210,.7);
  transform: rotateY(-90deg) translateZ(50px);
}
.top {
  background: rgba(210,210,0,.7);
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  background: rgba(210,0,210,.7);
  transform: rotateX(-90deg) translateZ(50px);
}
.select-form {
  margin-top: 50px;
}
					

JavaScript

const selectElem = document.querySelector('select');
const example = document.querySelector('#example-element');
selectElem.addEventListener('change', () => {
  if(selectElem.value === 'Choose a function') {
    return;
  } else {
    example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
    setTimeout(function() {
      example.style.transform = 'rotate3d(1, 1, 1, 30deg)';
    }, 2000)
  }
})
					

结果

规范

规范	状态	注释
CSS Transforms Level 2 The definition of '<transform-function>' in that specification.	编者草案	Added 3D transform functions.
CSS Transforms Level 1 The definition of '<transform-function>' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
<transform-function>	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 3.5 注意事项 完整支持 3.5 注意事项 注意事项 Firefox 14 removed experimental support for skew() , but it was reintroduced in Firefox 15. 注意事项 Before Firefox 16, the translation values of matrix() and matrix3d() could be <length> s, in addition to the standard <number> .	IE 完整支持 9 注意事项 完整支持 9 注意事项 注意事项 Internet Explorer 9 supports 2D but not 3D transforms. In version 9, mixing 2D and 3D transform functions invalidates the entire property.	Opera 完整支持 10.5	Safari 完整支持 3.1	WebView Android 完整支持 2	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 11	Safari iOS 完整支持 3.2	Samsung Internet Android 完整支持 1.0
3D support	Chrome 完整支持 12	Edge 完整支持 12	Firefox 完整支持 10	IE 完整支持 10	Opera 完整支持 15	Safari 完整支持 4	WebView Android 完整支持 3	Chrome Android 完整支持 18	Firefox Android 完整支持 10	Opera Android 完整支持 14	Safari iOS 完整支持 3.2	Samsung Internet Android 完整支持 1.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

另请参阅

• CSS transform property

元数据

• 最后修改： 2020 年 11 月 3 日

相关话题

1. CSS
2. CSS 参考
3. CSS Transforms
4. CSS Types
5. 指南

   1. Using CSS transforms
6. 特性

   1. <angle-percentage>
   2. <angle>
   3. <basic-shape>
   4. <blend-mode>
   5. <custom-ident>
   6. <dimension>
   7. <frequency-percentage>
   8. <frequency>
   9. <gradient>
   10. <image>
   11. <integer>
   12. <length-percentage>
   13. <length>
   14. <number>
   15. <percentage>
   16. <ratio>
   17. <resolution>
   18. <shape>
   19. <string>
   20. <time-percentage>
   21. <time>
   22. <transform-function>
   23. <url>
   24. backface-visibility
   25. color
   26. flex
   27. ident
   28. perspective
   29. perspective-origin
   30. position
   31. rotate
   32. scale
   33. transform
   34. transform-box
   35. transform-origin
   36. transform-style
   37. translate