在CSS3中反向3D旋转
我试图在父容器上做CSS3中的3D旋转...例如-webkit-transform：rotateY（30deg），但是反转儿童的旋转，例如-webkit-transform：rotateY（-30deg）。 我希望孩子们从观众的角度来看是“平坦的”。 当我将旋转应用到孩子身上时，某些东西会发生变化，即它在某种程度上正在旋转，但不正确。 我很确定我的问题是要处理透视原点或变换原点，但我无法弄清楚如何设置其值来解决它。 我创建了一个小提琴来演示这个问题。
http://jsfiddle.net/bobsmells/ndn83/2/
为了确认，我希望孩子div仍然存在于同一个3D空间中，也就是说，右边的孩子应该看起来更小，因为它离我们更远，但我希望两个孩子都没有轮换。
<div class="grandparent">
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
.grandparent{
-webkit-perspective: 500;
-webkit-transform-style: preserve-3d;
-webkit-perspective-origin: 50% 50%;
}
.parent {
position: relative;
background-color: yellow;
width: 200px;
height: 150px;
-webkit-transform: rotateY(30deg) ;
}
.child1 {
position: absolute;
top: 20px;
left: 20px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}
.child2 {
position: absolute;
top: 20px;
left: 120px;
background-color: green;
width: 50px;
height: 50px;
-webkit-transform: rotateY(-30deg) ;
}
您必须在父级中设置-webkit-transform-style：preserve-3d; 如果是在盛大的家长不影响孩子。
（可能它应该“级联”，但它不会）。
一旦你做到了，你会发现孩子是隐形的，因为他们在父母的背后，但那是另一回事。 使父母半透明，你会看到他们。
链接地址: http://www.djcxy.com/p/71217.html