当我添加另一个同级元素时，CSS-3 会转换 mangle HTML 元素。

Question

3 基本上只是想了解 CSS3 属性 perspective 和 transform-style:preserve-3d 是如何工作的，所以我做了以下两个演示：

DEMO ONE:

HTML ::

<div class="wrapper">
    <div class="inner"></div>
</div>

CSS:: .wrapper { 透视：1000px； 变换样式：preserve-3d； } .inner { 边距：200px 0 0 200px； 高度：400px； 宽度：400px； 背景：#444； 变换 : translateX(-350px) translateZ(-200px) rotateY(45deg); }

在第一个演示中，所有转换属性的行为都如我所愿，我希望 div 向左移动，然后在 z 偏移上向后移动，然后旋转 45 度。这正是我想要的，现在当我向 html 添加另一个 inner div 时出现问题，见下文：

DEMO TWO

HTML::

<div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

CSS::

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

突然我的变换被破坏了，我不知道为什么会这样？有人可以解释一下吗？

谢谢。

亚历克斯-z。

Answer 1

当你应用透视时，重要的是你在哪里应用它。

您正在查看一个点，该点决定了场景的渲染方式。

默认情况下，它位于元素的中心。你的元素在这里：

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
    border: solid 1px red;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

<div class="wrapper">
    <div class="inner"></div>
</div>

这里

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
    border: solid 1px red;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

<div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
</div>

看看 wrapper 是怎么变大的，所以透视中心变低了。

现在看第二个例子，与第一个例子的视角相同，手工应用

.wrapper {
    perspective:1000px;
    transform-style: preserve-3d;
    border: solid 1px red;
    perspective-origin: center 300px;
}
.inner {
    margin: 200px 0 0 200px;
    height: 400px;
    width: 400px;
    background: #444;
    transform : translateX(-350px) translateZ(-200px) rotateY(45deg);
}

<div class="wrapper">
    <div class="inner"></div>
    <div class="inner"></div>
</div>