CSS中的3D转换功能

本是古典何须时尚 2022-12-03 01:42 153阅读 0赞

**In this article, I’ll show how to add another dimension to your web pages and applications with the new 3D transformation functions and properties in CSS. We’ll look at transform, translate, rotations, scaling, perspective and more, along with issues to do with z-index, browser gotchas, and the best use cases for these functions.**

**在本文中，我将展示如何使用CSS中的新3D转换功能和属性在网页和应用程序中添加另一个维度。** **我们将研究变换，平移，旋转，缩放，透视图等等，以及与z-index，浏览器陷阱有关的问题以及这些功能的最佳用例。**

HTML elements can be transformed in three dimensions:

HTML元素可以在三个维度上进行转换：

*  the horizontal x-axis
    
    水平x轴
 *  the vertical y-axis, and
    
    垂直y轴，以及
 *  the depth z-axis
    
    深度z轴

On a two-dimensional screen, it’s useful to think of the surface being at z co-ordinate zero. A positive z-value moves an object toward you (in front of the screen) while a negative z-value moves an object away (behind the screen). When perspective is added, a more distant z-value can cause the object to disappear entirely.

在二维屏幕上，考虑曲面在z坐标为零的位置很有用。 z值正向将对象移向您(在屏幕前面)，z值负向将对象移开(在屏幕后面)。 添加透视图时，更远的z值可能导致对象完全消失。

There are some things to note here:

这里有一些事情要注意：

1.  CSS can only transform two-dimensional HTML elements in three-dimensional space. The elements themselves remain flat and have zero depth. It’s possible to scale in the z-plane, but that will *not* extrude a square into a cube. You can still create a cube, but would need six elements to make each side.
    
    CSS只能在三维空间中转换二维HTML元素。 元素本身保持平坦，深度为零。 这有可能在z平面规模，但*不会*挤压方成一个立方体。 您仍然可以创建一个多维数据集，但是每边需要六个元素。
2.  CSS 3D transformations are great for page effects — but don’t expect that you’ll be able to create the next MineCraft or Call of Duty. Complex models are better implemented using a technology such as [WebGL][].
    
    CSS 3D转换非常适合页面效果-但不要指望您将能够创建下一个MineCraft或《使命召唤》。 使用[WebGL之类][WebGL]的技术可以更好地实现复杂的模型。

3D transformations are [well-supported in all modern browsers][] (IE10+), but:

[所有现代浏览器][well-supported in all modern browsers] (IE10 +)都[很好地支持][well-supported in all modern browsers] 3D转换，但是：

*  Internet Explorer doesn’t support `transform-style: preserve-3d`, which makes it impossible to create a 3D scene.
    
    Internet Explorer不支持`transform-style: preserve-3d` ，这使得无法创建3D场景。
 *  All versions of Safari must use the vendor-prefixed `-webkit-backface-visibility` to hide rear faces. All other browsers support `backface-visibility`.
    
    Safari的所有版本都必须使用供应商前缀的`-webkit-backface-visibility`隐藏背面。 所有其他浏览器都支持`backface-visibility` 。

The following sections describe the 3D transformation properties and functions. The **[demonstration page][]** illustrates how most are used.

以下各节描述了3D转换属性和功能。 **[演示页面][demonstration page]**说明了如何使用大多数内容。

## `transform`属性 **(**The `transform` Property**)** ##

Any element can have a single `transform` property applied. It can be assigned a function with one or more parameters. For example:

任何元素都可以应用单个`transform`属性。 可以为其分配具有一个或多个参数的功能。 例如：

.element {
      transform: function1(parameter1, [...parameterN]);
    }

If two or more transformations are required, any number of space-separated functions can be defined:

如果需要两个或多个转换，则可以定义任意数量的以空格分隔的函数：

.element {
      transform: function1(p1, [...pN]) function2(p1, [...pN]);
    }

For example, to scale in the horizontal plane and transform vertically:

例如，要在水平面缩放并垂直转换：

.element {
      transform: scaleX(2) translateY(50px);
    }

Finally, `transform: none;` removes all existing transforms.

最后， `transform: none;` 删除所有现有的变换。

## 平移(移动)功能 **(**Translation (Moving) Functions**)** ##

You have possibly used `translate` functions to move an element horizontally along the x axis or vertically along the y axis:

您可能已经使用了`translate`功能来使元素沿x轴水平移动或沿y轴垂直移动：

transform: translateX(50px);        /* 50px to right */
    transform: translateY(-100%);       /* 100% up */
    transform: translate(50px, -100%);  /* both together */

Any length unit can be used. Percentages reference the size of the transformed element so a 100px high block with `translateY(80%)` applied moves it down by 80 pixels.

可以使用任何长度单位。 百分比引用了转换后的元素的大小，因此，应用了transformY `translateY(80%)`的100px高的块将其向下移动了80个像素。

Moving into the third dimension, we can also use `translateZ`:

进入第三维，我们还可以使用`translateZ` ：

transform: translateZ(-200px);      /* 200px 'into' the screen */

Given three elements, `#box1`, `#box2` and `#box3`, absolutely positioned in the same place, with `translateZ(-200px)` applied to \#box2 and `translateZ(-400px)` applied to \#box3. The result is fairly uninspiring:

给出三个元素， `#box1` ， `#box2`和`#box3` ，绝对定位在同一地点，与`translateZ(-200px)`施加到＃BOX2和`translateZ(-400px)`施加到＃BOX3。 结果非常令人鼓舞：

![non-rotated scene][]

However, if we rotate the whole outer `#scene` container, the z-axis transformations become more evident:

但是，如果我们旋转整个外部`#scene`容器，则z轴变换将变得更加明显：

#scene {
      transform-style: preserve-3d;
      transform: rotateX(-10deg) rotateY(-10deg);
    }

![rotated scene][]

The shorthand `translate3d` function allows an element to be moved along all three axes accordingly:

简写的`translate3d`函数允许元素相应地沿所有三个轴移动：

transform: translate3d(50px, 100%, 7em); /* x, y, z axis */

## `transform-style`属性 **(**`transform-style` Property**)** ##

By default (and always in IE), `transform-style` is set to `flat`. This indicates that all transformed children of an element lie in the plane of the element itself. In other words, inner elements could have any transform applied but they would be squashed into the flat plane of the container:

默认情况下(始终在IE中)， `transform-style`设置为`flat` 。 这表明元素的所有变形子元素都位于元素本身的平面中。 换句话说，内部元素可以应用任何转换，但是将被压缩到容器的平面中：

![flat style][]

In most situations, `transform-style: preserve-3d;` must be used to indicate the child elements are positioned in 3D space and any transformation of the container will transform all accordingly.

在大多数情况下， `transform-style: preserve-3d;` 必须用于指示子元素位于3D空间中，并且容器的任何变换都将相应地进行变换。

## 旋转功能 **(**Rotation Functions**)** ##

The 2D `rotate()` function actually rotates elements around the z-axis and is identical to `rotateZ()`. For example:

二维`rotate()`函数实际上绕z轴的元素和是相同的`rotateZ()` 例如：

transform: rotateZ(45deg); /* or rotate(45deg) */

![rotate around z axis][]

`rotateX()` rotates around the horizontal axis and `rotateY()` around the vertical.

`rotateX()`围绕水平轴并旋转`rotateY()`绕垂直。

Angles can be defined in:

角度可以定义为：

*  `turn` — e.g. `0.5turn` is half a turn clockwise
    
    `turn` —例如`0.5turn`转顺时针旋转半圈
 *  `deg` — degrees, e.g. `90deg` is one quarter turn clockwise
    
    `deg` —度，例如`90deg`是顺时针旋转四分之一圈
 *  `rad` — radians, e.g. `-3.1416rad` is half a turn counter-clockwise
    
    `rad` —弧度，例如`-3.1416rad`逆时针旋转半圈
 *  `grad` — gradians. One full turn is `400grad`, so `-200grad` is half a turn counter-clockwise.
    
    `grad` —格里安人。 一整圈是`400grad` ，所以`-200grad`是逆时针半圈。

Three axes of rotation can be set with the `rotate3d()` function. Somewhat confusingly, it accepts four values, which describe a vector:

可以使用`rotate3d()`函数设置三个旋转轴。 令人困惑的是，它接受四个值，这些值描述了一个向量：

*  `x` — the x-coordinate of the vector denoting the axis of rotation (0 to 1).
    
    `x` —表示旋转轴(0到1)的向量的x坐标。
 *  `y` — the y-coordinate of the vector denoting the axis of rotation (0 to 1).
    
    `y` —表示旋转轴(0到1)的向量的y坐标。
 *  `z` — the z-coordinate of the vector denoting the axis of rotation (0 to 1).
    
    `z` —表示旋转轴(0到1)的向量的z坐标。
 *  `a` — the angle of rotation. A positive angle denotes clockwise rotation and negative is counter-clockwise.
    
    `a` \-旋转的角度。 正角表示顺时针旋转，负角表示逆时针旋转。

Math masochists can [read full details of `rotate3d()` at MDN][read full details of _rotate3d_ at MDN].

数学受虐狂可以[在MDN上阅读`rotate3d()`全部详细信息][read full details of _rotate3d_ at MDN] 。

## 缩放(大小)功能 **(**Scaling (Size) Functions**)** ##

The functions `scaleX()` and `scaleY()` stretch or shrink an element in the horizontal and vertical planes accordingly:

函数`scaleX()`和`scaleY()`在水平和垂直平面上拉伸或收缩元素：

transform: scaleX(2);   /* twice as wide */
    transform: scaleY(0.5); /* half as tall */

`scaleZ()` does the same for the depth plane. In the example above, `transform: scaleZ(0.5);` therefore reduces the spacing between each element by half.

`scaleZ()`对深度平面执行相同的操作。 在上面的示例中， `transform: scaleZ(0.5);` 因此，每个元素之间的间距减少了一半。

The `scale3d(x, y, z)` function can apply scaling in all planes in one command. For example:

`scale3d(x, y, z)`函数可以在一个命令中在所有平面上应用缩放。 例如：

#scene {
      transform-style: preserve-3d;
      transform: scale3d(2, 1, 0.5) rotateX(-10deg) rotateY(-10deg);
    }

![scale in three dimensions][]

## 转换原点 **(**Transform Origin**)** ##

By default, an element is rotated and scaled around its center point. This can be modified by setting `transform-origin` with up to three space-separated values:

默认情况下，元素绕其中心点旋转和缩放。 可以通过设置最多三个以空格分隔的值的`transform-origin`来修改此值：

*  **one-value syntax:** a length or percentage of the x origin. A single `left`, `center`, `right`, `top` or `bottom` keyword can also be used where `top` and `bottom` set the y origin with a center x origin.
    
    **一值语法：** x原点的长度或百分比。 在`top`和`bottom`将y原点设置为中心x原点的情况`bottom`也可以使用单个`left` ， `center` ， `right` ， `top`或`bottom`关键字。
 *  **two-value syntax:** the x and y origins. A length, percentage or keyword can be used.
    
    **二值语法：** x和y的原点。 可以使用长度，百分比或关键字。
 *  **three-value syntax:** the x, y and z origins. The z value may only be a length unit such as `px` or `em`.
    
    **三值语法：** x，y和z的原点。 z值只能是长度单位，例如`px`或`em` 。

Moving one origin affects the rotational plane of the others. For example, `transform-origin: left center 0;` moves the origin to the center of the left-hand edge. This will affect `rotateY()` and `rotateZ()` functions.

移动一个原点会影响另一个原点的旋转平面。 例如， `transform-origin: left center 0;` 将原点移动到左侧边缘的中心。 这将影响`rotateY()`和`rotateZ()`函数。

## 背面可见性 **(**Backface Visibility**)** ##

The rear of an element is shown when it’s rotated around the x or y axis by more than 90 but less than 270 degrees in either direction. The rear is effectively a mirror image and it’s `visible` by default.

当元素沿x或y轴在任一方向上旋转超过90度但小于270度时，将显示元素的背面。 背面实际上是一个镜像，默认情况下`visible` 。

The rear can be hidden by setting `backface-visibility: hidden;` — if it’s applied to `#box2`:

可以通过设置`backface-visibility: hidden;`来隐藏后部`backface-visibility: hidden;` —如果应用于`#box2` ：

#box2 {
      backface-visibility: hidden;
    }
    
    #scene {
      transform: rotateX(-10deg) rotateY(-135deg);
    }

![hidden backface][]

`backface-visibility: hidden;` is often used for card-flipping animations where two elements show the front and back of a card but only one can be visible at a time.

`backface-visibility: hidden;` 通常用于翻转卡片动画，其中两个元素显示卡片的正面和背面，但一次只能看到一个。

## 透视 **(**Perspective**)** ##

The examples shown above don’t apply perspective. An element moved deeper into the z plane remains the same size no matter how far away it is from the viewer. The `perspective` property defaults to `none` but it can be set to any positive length. For example:

上面显示的示例不适用于透视图。 移入z平面更深的元素将保持相同的大小，无论它距查看器有多远。 `perspective`属性默认为`none`但可以设置为任何正长度。 例如：

#scene {
      perspective: 1000px;
      transform: rotateX(-15deg) rotateY(-15deg);
    }

![applying perspective][]

The smaller the `perspective` length, the closer the vanishing point and the more pronounced the 3D effect:

`perspective`长度越小，消失点越近，3D效果越明显：

#scene {
      perspective: 200px;
      transform: rotateX(-15deg) rotateY(-45deg);
    }

![closer vanishing point][]

## 透视消失点 **(**Perspective Vanishing Point**)** ##

By default, the perspective vanishing point is at the center of the element being transformed. It can be modified by setting `perspective-origin: x y;`, where:

默认情况下，透视消失点位于要变换的元素的中心。 可以通过设置`perspective-origin: xy;`来修改它`perspective-origin: xy;` ，其中：

*  `x` is a keyword (`left`, `center`, or `right`) or a percentage relative to the width of the element (`0%`, `50%` and `100%` is equivalent to the keywords).
    
    `x`是关键字( `left` ， `center`或`right` )或相对于元素宽度的百分比( `0%` ， `50%`和`100%`等效于关键字)。
 *  `y` is a keyword (`top`, `center`, or `bottom`) or a percentage relative to the height of the element (`0%`, `50%` and `100%` is equivalent to the keywords).
    
    `y`是关键字( `top` ， `center`或`bottom` )或相对于元素高度的百分比( `0%` ， `50%`和`100%`等效于关键字)。

Top-left vanishing point:

左上消失点：

#scene {
      perspective-origin: left top; /* or 0% 0% */
      perspective: 1000px;
    }

![top-left vanishing point][]

Bottom-right vanishing point:

右下消失点：

#scene {
      perspective-origin: right bottom; /* or 100% 100% */
      perspective: 1000px;
    }

![bottom-right vanishing point][]

There’s also a `perspective()` function — for examle, `transform: perspective(200px)`. However, it doesn’t appear to respect any `perspective-origin`.

还有一个`perspective()`函数-例如， `transform: perspective(200px)` 。 但是，似乎没有尊重任何`perspective-origin` 。

## 现在都在一起了 **(**All Together Now**)** ##

Finally, scaling, rotation, and translation can be defined in a single `matrix3d()` function which requires no less than 16 values for a [three-dimensional affine transformation][].

最后，缩放，旋转和平移可以在单个`matrix3d()`函数中定义，对于[三维仿射变换][three-dimensional affine transformation] ，该函数需要不少于16个值。

This is probably best used in JavaScript and attempted by those with a degree in geometry! For CSS, a list of transformation functions is likely to be more readable and maintainable.

这可能是JavaScript中最好的用法，并且是那些具有几何学学位的人尝试的！ 对于CSS，转换函数列表可能更具可读性和可维护性。

## 进一步阅读 **(**Further Reading**)** ##

Working in three dimensions can be conceptually difficult, but CSS transformations are an easier route to object manipulation. The **[demonstration page][]** provides an interactive tool which will help you understand how the properties and functions work together.

从概念上讲，在三个维度上工作可能很困难，但是CSS转换是一种更容易进行对象操作的途径。 **[演示页面][demonstration page]**提供了一个交互式工具，该工具将帮助您了解属性和功能如何协同工作。

You can find stunning examples of CSS 3D transformations, including [virtual reality viewers][], [first-person shooters][], [image galleries][] and [Star Wars scrolling text][]. Many are proof-of-concept demonstrations which are unlikely to have use in typical projects. However, a few subtle, progressively-enhanced 3D effects can add another dimension to your web pages and applications.

您可以找到CSS 3D转换的惊人示例，包括[虚拟现实查看器][virtual reality viewers] ， [第一人称射击][first-person shooters] ， [图像画廊][image galleries]和[《星球大战》滚动文本][Star Wars scrolling text] 。 许多是概念验证的演示，不太可能在典型项目中使用。 但是，一些微妙的，逐渐增强的3D效果可以为您的网页和应用程序添加另一个维度。

*  [MDN Using CSS transforms][]
    
    [使用CSS转换的MDN][MDN Using CSS transforms]
 *  [CSS Transforms Module][]
    
    [CSS转换模块][CSS Transforms Module]
 *  [Introduction to CSS 3D transforms][]
    
    [CSS 3D变换简介][Introduction to CSS 3D transforms]

> 翻译自: [https://www.sitepoint.com/css-3d-transformation-functions/][https_www.sitepoint.com_css-3d-transformation-functions]

[WebGL]: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
[well-supported in all modern browsers]: https://caniuse.com/#feat=transforms3d
[demonstration page]: https://codepen.io/craigbuckler/full/OEGGJd/
[non-rotated scene]: /images/20221123/0d36163a7ac546e1b1a147d40e323806.png
[rotated scene]: /images/20221123/0aa86e92378d4e6da3daa25c142fc23c.png
[flat style]: /images/20221123/77dd3c598e304027927567d8533c638f.png
[rotate around z axis]: /images/20221123/121e2aecad114ea0ae29f5b615d99bdb.png
[read full details of _rotate3d_ at MDN]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d
[scale in three dimensions]: /images/20221123/cdef6987568c4e0b93301596e59c7a20.png
[hidden backface]: /images/20221123/11b1ed147ada4b46a3695add641e253a.png
[applying perspective]: /images/20221123/6e8126579bb442a7b3a25a5832c180bf.png
[closer vanishing point]: /images/20221123/c30799f511bc4b9a883d724e6f11ecdb.png
[top-left vanishing point]: /images/20221123/23103512fa294942bdba315a4bd1af8a.png
[bottom-right vanishing point]: /images/20221123/a2434610f0fb403aa001584565938138.png
[three-dimensional affine transformation]: https://en.wikipedia.org/wiki/Affine_transformation
[virtual reality viewers]: https://keithclark.co.uk/articles/css-vr/
[first-person shooters]: https://keithclark.co.uk/labs/css-fps/desktop/
[image galleries]: https://tympanus.net/Tutorials/3DHoverEffects/
[Star Wars scrolling text]: https://www.sitepoint.com/css3-starwars-scrolling-text/
[MDN Using CSS transforms]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms
[CSS Transforms Module]: https://www.w3.org/TR/css-transforms-1/
[Introduction to CSS 3D transforms]: https://3dtransforms.desandro.com/
[https_www.sitepoint.com_css-3d-transformation-functions]: https://www.sitepoint.com/css-3d-transformation-functions/