<transform-function>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

<transform-function> CSS 数据类型 代表影响元素外观的变换。变换 函数 可以旋转、调整大小、扭曲或在 2D 或 3D 空间中移动元素。它用于 transform 属性。

语法

<transform-function> 数据类型使用下面列出的变换函数之一指定。每个函数在 2D 或 3D 中应用几何运算。

矩阵变换

matrix()

描述一个齐次二维变换矩阵。

matrix3d()

描述一个 3D 变换,作为 4×4 齐次矩阵。

透视

perspective()

设置用户和 z=0 平面之间的距离。

旋转

rotate()

绕二维平面上的固定点旋转元素。

rotate3d()

绕三维空间中的固定轴旋转元素。

rotateX()

绕水平轴旋转元素。

rotateY()

绕垂直轴旋转元素。

rotateZ()

绕 z 轴旋转元素。

缩放(调整大小)

scale()

在二维平面上放大或缩小元素。

scale3d()

在三维空间中放大或缩小元素。

scaleX()

水平方向放大或缩小元素。

scaleY()

垂直方向放大或缩小元素。

scaleZ()

沿 z 轴放大或缩小元素。

倾斜(扭曲)

skew()

在二维平面上倾斜元素。

skewX()

水平方向倾斜元素。

skewY()

垂直方向倾斜元素。

平移(移动)

translate()

在二维平面上平移元素。

translate3d()

在三维空间中平移元素。

translateX()

水平方向平移元素。

translateY()

垂直方向平移元素。

translateZ()

沿 z 轴平移元素。

描述

可以使用各种坐标模型来描述 HTML 元素的大小和形状,以及应用于它的任何变换。最常见的是笛卡尔坐标系,虽然齐次坐标有时也会使用。

笛卡尔坐标

在笛卡尔坐标系中,二维点使用两个值来描述:x 坐标(横坐标)和 y 坐标(纵坐标)。这由向量符号 (x, y) 表示。

A cartesian plane showing the negative Y and positive X axis starting from origin with three points P1, P2 and P3 with corresponding X and Y values

在 CSS(以及大多数计算机图形学中),原点 (0, 0) 代表任何元素的左上角。正坐标在原点的下方和右侧,而负坐标在原点的上方和左侧。因此,一个在右侧 2 个单位、下方 5 个单位的点是 (2, 5),而一个在左侧 3 个单位、上方 12 个单位的点是 (-3, -12)

变换函数

变换函数通过操纵元素坐标的值来改变元素的外观。线性变换函数使用 2×2 矩阵来描述,如下所示

( a c b d ) \begin{pmatrix} a & c \\ b & d \end{pmatrix}

该函数通过使用矩阵乘法应用于元素。因此,每个坐标根据矩阵中的值进行改变

( a c b d ) ( x y ) = ( a x + c y b x + d y ) \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)

甚至可以连续应用多个变换

( a 1 c 1 b 1 d 1 ) ( a 2 c 2 b 2 d 2 ) = ( 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 ) \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_1a_2 + c_1b_2 & a_1c_2 + c_1d_2 \\ b_1a_2 + d_1b_2 & b_1c_2 + d_1d_2 \end{array} \right)

使用这种表示法,可以描述(因此可以组合)大多数常见的变换:旋转、缩放或倾斜。(实际上,所有作为线性函数的变换都可以用这种表示法来描述。)组合变换的实际应用顺序是从右到左。

然而,有一种主要的变换不是线性的,因此在使用这种表示法时必须进行特殊处理:平移。平移向量 (tx, ty) 必须单独表示,作为两个额外的参数。

注意:虽然比笛卡尔坐标更复杂,但齐次坐标射影几何中导致 3×3 变换矩阵,并且可以将平移表示为线性函数。

注意:变换函数与 transform 属性一起使用,但不与单个变换属性一起使用 -translatescalerotate.

示例

变换函数比较

以下示例提供了一个从 DOM 元素和变换创建的 3D 立方体,以及一个选择菜单,允许您选择不同的变换函数来变换立方体,以便您可以比较不同类型的效果。

选择一个,变换就会应用到立方体上;2 秒后,立方体会恢复到初始状态。立方体的初始状态使用 transform3d() 稍微旋转,以便您可以看到所有变换的效果。

HTML

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 for="transfunction">Select a transform function</label>
    <select id="transfunction">
      <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

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: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

.select-form {
  margin-top: 50px;
}

JavaScript

js
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(() => {
      example.style.transform = "rotate3d(1, 1, 1, 30deg)";
    }, 2000);
  }
});

结果

规范

规范
CSS 变换模块级别 1
# transform-functions
CSS 变换模块级别 2
# transform-functions

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见