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

Question

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

HTML::

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

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

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

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 {
    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>

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

CSS-3 transforms mangle HTML element when i add another sibling element .

html

css

css-transforms