Reverse 3d rotation in CSS3

I'm trying to do a 3D rotation in CSS3 on a parent container...eg -webkit-transform: rotateY(30deg), but reverse the rotation on children eg -webkit-transform: rotateY(-30deg). I want the children to be "flat" from the viewer's perspective. When I apply the rotation on the child, something changes, ie it's rotating to some extent, but not correctly. I'm pretty sure my problem is either to do with the perspective-origin OR the transform-origin, but I can't quite work out how to set the values of either to solve it. I've created a fiddle to demonstrate the problem.

http://jsfiddle.net/bobsmells/ndn83/2/

Just to confirm, I want the child divs to still exist in the same 3D space, ie the one to the right should still appear smaller because it's further away, but I want both children to have no rotation.

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

---

You have to set -webkit-transform-style: preserve-3d in the parent; if it is in the grand parent doesn't affect the children.

(Probably it should "cascade", but it just doesn't).

Once you do it, you will find that the children are invisible, because they are behind the parent, but that's another story. Make the parent semitransparent and you will see them.

链接地址: http://www.djcxy.com/p/71218.html

上一篇: 为什么CSS使用假元素？

下一篇: 在CSS3中反向3D旋转