三维坐标嵌套变换

CSS animations are incredibly popular right now, and I don't just mean animating a simple color or dimension property, I mean 3D transformations as well; CSS flips and rotating cubes being prime examples. We can find simple CSS snippets and examples for transforms, but it's important that developers understand exactly what's happening. Let me take you step by step through the process of nesting animated 3D transform elements!

CSS动画现在非常流行，我不仅指对简单的颜色或尺寸属性进行动画处理，还指3D转换。 CSS翻转和旋转立方体是最好的例子。 我们可以找到简单CSS片段和转换示例，但开发人员必须准确了解正在发生的事情，这一点很重要。 让我一步一步地指导您嵌套动画3D变换元素的过程！

Let's say we have a door in a frame:

假设我们在框架中有一扇门：

The HTML is simply:

HTML就是：

In order to open this door, we add a class of door--open:

为了打开此门，我们添加一类door--open ：

Now we apply a 3D transform on it (with anywhere on its left side):

现在，我们在其上应用3D变换(在其左侧的任何位置都具有 )：

.door--open {  transform-origin: 0 0 /*whatever y value you wish*/;  transform: rotateY(-45deg);}

This results in:

结果是：

It doesn't look very realistic. The property that takes care of this is called and it makes things that are closer appear larger and those that are further away appear smaller.

它看起来不太现实。 处理此问题的属性称为“ ，它使较近的事物显得较大而较远的事物显得较小。

The perspective property should be applied on the parent of the 3D transformed element. Applying it on any ancestor is going to work in WebKit browsers, but not in Firefox or IE.

perspective属性应应用于3D变换后的元素的父级。 将其应用于任何祖先将可以在WebKit浏览器中工作，但不能在Firefox或IE中工作。

So we're going to add a frame--realistic class to our door frame:

因此，我们将在frame--realistic上添加一个frame--realistic类：

Now we set a perspective on it. The lower the value, the smaller the distance from your eyes is, thus making the things that are closer appear much bigger than those that are further away.

现在我们设置一个perspective就可以了。 值越低，距眼睛的距离越小，因此使较近的物体看上去比远处的物体更大。

.frame--realistic {  perspective: 20em;}

We get the following result:

我们得到以下结果：

Now this looks much better! But we can do more! For example, we can also animate the door in 3D. Just replace the door-open class with a door--ani class in the HTML and add the following CSS:

现在看起来好多了！ 但是我们可以做更多！ 例如，我们还可以对3D门进行动画处理。 只需将HTML中的door--ani类替换为door-open类，然后添加以下CSS：

.door--ani {  transform-origin: 0 0;  animation: doorani 1.3s ease-in-out infinite alternate;}@keyframes doorani {  from { transform: rotateY(-43deg); }  to { transform: rotateY(43deg); }}

Result:

结果：

Now let's say we want to also animate the frame a bit in 3D. That should be simple, right? Just add a frame--ani class to the frame, set an animation on it and move the perspective on the container:

现在，我们要对帧进行3D动画处理。 那应该很简单，对吧？ 只需在frame--ani添加一个frame--ani类，在其上设置动画并在容器上移动perspective ：

The HTML would become:

HTML将变为：

And we would need to add the following CSS:

并且我们需要添加以下CSS：

.container--realistic {  perspective: 20em;}.frame--ani {  animation: frameani 2s ease-in-out infinite alternate;}@keyframes frameani {  from { transform: rotateY(-30deg); }  to { transform: rotateY(30deg); }}

But what we get is:

但是我们得到的是：

It doesn't look right anymore. It looks as if the door has been flattened into the plane of its parent. Actually, that's exactly what happens because the default value of the property (which tells the browser whether the 3D transformed children of a 3D transformed element should keep their own 3D transforms or not) has a default value of flat.

它看起来不正确了。 好像门已被平整到其父平面中。 实际上，这正是发生这种情况的原因，因为属性的默认值(它告诉浏览器3D转换元素的3D转换后代是否应该保留自己的3D转换)具有默认值flat 。

This can be fixed by setting transform-style: preserve-3d on the 3D transformed parent (the frame in our case). And then we get this nice result:

可以通过设置transform-style: preserve-3d来解决此问题transform-style: preserve-3d在3D转换后的父对象(本例中为框架)上transform-style: preserve-3d 。 然后我们得到了这个不错的结果：

However, IE10/11 only support the flat value for the transform-style property. We can sometimes go around this by chaining all the transforms from the parent (and ancestors in general) onto the deepest 3D transformed element.

但是，IE10 / 11仅支持transform-style属性的flat值。 有时，我们可以通过将所有转换(从父代(通常是祖先))链接到最深的3D转换元素上来解决此问题。

For example, let's say we have a slightly rotated cube (without the top and bottom faces for simplicity). The HTML is:

例如，假设我们有一个稍微旋转的立方体(为简单起见，没有顶面和底面)。 HTML是：

And the relevant CSS:

以及相关CSS：

.cube {  position: relative;  width: 5em; height: 5em;  transform-style: preserve-3d;  transform: rotateY(30deg) rotateX(10deg);}.face {  position: absolute;  width: 100%; height: 100%;}.face:nth-child(1) {  transform: /*rotateY(0deg)*/ translateZ(2.5em /* half the side length, 5em in this case */);}.face:nth-child(2) {  transform: rotateY( 90deg)   translateZ(2.5em);}.face:nth-child(3) {  transform: rotateY(180deg)   translateZ(2.5em);}.face:nth-child(4) {  transform: rotateY(270deg)   translateZ(2.5em);}

With this code (you can check for it if you wish), we get the following result:

使用此代码(如果需要，可以查看 )，我们得到以下结果：

To make this work in IE, we need to remove the transform from the cube and chain it before the transforms for each face (and if the cube also had a 3D transformed parent, then we would have to remove that transform from it and chain it onto the transforms for each face before that of the cube). We also move the perspective from the container to the cube. Like this:

为了在IE中实现此功能，我们需要从多维数据集中删除该转换，并在每个面的转换之前将其链接(如果多维数据集也具有3D转换的父对象，那么我们就必须从其中删除该转换并将其链接转换为立方体之前每个面的转换)。 我们还将透视图从容器移动到多维数据集。 像这样：

.cube--ie {  perspective: 20em;  transform: none;}.face--ie:nth-child(1) {  transform: rotateY(30deg) rotateX(10deg)              translateZ(2.5em);}.face--ie:nth-child(2) {  transform: rotateY(30deg) rotateX(10deg)              rotateY( 90deg) translateZ(2.5em);}.face--ie:nth-child(3) {  transform: rotateY(30deg) rotateX(10deg)             rotateY(180deg) translateZ(2.5em);}.face--ie:nth-child(4) {  transform: rotateY(30deg) rotateX(10deg)             rotateY(270deg) translateZ(2.5em);}

And we get the same result, even in IE:

即使在IE中，我们也能得到相同的结果：

Not very convenient, but it's not that bad. Not much more code, not much uglier... Well, the problem appears when we want to animate the cube. As long as we can rely on transform-style: preserve-3d working, we simply need to add a cube--ani class and this little bit of CSS:

不是很方便，但是还算不错。 没有更多的代码，没有太多的丑陋...好吧，当我们想为立方体设置动画时，问题就出现了。 只要我们可以依赖于transform-style: preserve-3d工作，我们只需要添加一个cube--ani类和以下CSS：

.cube--ani {  animation: rot 4s linear infinite;}@keyframes rot {  to { transform: rotateY(-330deg) rotateX(370deg); }}

However, for IE10/11, we cannot have 3D transforms on the cube itself, so we have chained them onto the faces. Which means that's where we need to animate them. Which means... exactly, one set of keyframes for each face!

但是，对于IE10 / 11，我们无法在多维数据集本身上进行3D转换，因此我们已将其链接到面上。 这意味着我们需要对其进行动画处理。 这意味着...确切地说，每个面Kong都有一组关键帧！

.cube--ie {  animation: none;}.cube--ani .face--ie:nth-child(1) {  animation: rot1 4s linear infinite;}@keyframes rot1 {  to {    transform: rotateY(-330deg) rotateX(370deg)                translateZ(2.5em);  }}.cube--ani .face--ie:nth-child(2) {  animation: rot2 4s linear infinite;}@keyframes rot2 {  to {    transform: rotateY(-330deg) rotateX(370deg)                rotateY(90deg) translateZ(2.5em);  }}.cube--ani .face--ie:nth-child(3) {  animation: rot3 4s linear infinite;}@keyframes rot3 {  to {    transform: rotateY(-330deg) rotateX(370deg)                rotateY(180deg) translateZ(2.5em);  }}.cube--ani .face--ie:nth-child(4) {  animation: rot4 4s linear infinite;}@keyframes rot4 {  to {    transform: rotateY(-330deg) rotateX(370deg)                rotateY(270deg) translateZ(2.5em);  }}

All that, in order to achieve the same result:

所有这些，以达到相同的结果：

And if so much code is required when there are only four faces, can you imagine what an awful mess would result when trying to do this for ?

而且，如果只有四个脸部时需要那么多代码，您能想象一下，尝试对进行操作时会造成多大的混乱吗？

You may be wondering about the case with the door, where the parent element (the frame) also has a height and a width and is itself visible. Well, the only solution to have both the door and the frame animated in IE10/11 is to change the HTML such that the frame and the door are siblings and animate them individually, while also having the transforms of the frame chained onto the door.

您可能想知道门的情况，其中父元素(框架)也具有高度和宽度，并且本身可见。 好吧，在IE10 / 11中使门和框架同时具有动画效果的唯一解决方案是更改HTML，使框架和门成为同级兄弟并分别为其设置动画，同时还将框架的变换链接到门上。

翻译自:

三维坐标嵌套变换