Question

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

HTML ::

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

CSS :: .wrapper { 透视：1000像素; transform-style：preserve-3d; } .inner { 保证金：200px 0 0 200px; 身高：400px; 宽度：400px; 背景：＃444; transform：translateX（-350px）translateZ（-200px）rotateY（45deg）; }

在第一个演示中，所有转换属性的行为与我想要的一样，我希望div向左移动然后向后移动z偏移然后旋转45degs。这正是我想要的，现在当我向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

当您应用透视图时，重要的是应用它。

有一点你正在看，这一点决定了场景的呈现方式。

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

在这里

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

了解包装器如何更大，因此透视中心更低。

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

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

1 个答案: