Question

我正在尝试以非常简单的设置旋转两个元素

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
</div>

父元素具有css透视属性，而子元素则执行转换

#parent {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    width: 80px;
    height: 24px;
    background-color: grey;
    padding: 1px;
}
.child {
    -webkit-transform: rotateY( 66deg );
    -moz-transform: rotateY( 66deg );
    transform: rotateY( 66deg );
    width: 50px;
    height: 50px;
    margin:10px;
    background-color: green;
}

（jsfiddle）我不明白的是，第二个孩子正确旋转，但第一个孩子没有。它的顶部是水平的而不是旋转的。有什么建议为什么会这样？

Answer 1

因为rotateY使用3d透视。

在您的HTML中尝试这一点，它应该变得清晰：

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

对于我来说，它甚至可以改变矩形的颜色。

css：旋转元素问题

1 个答案: