Question

我有一个包含3个div的容器，一个b和c。将容器旋转90度，这样容器就像放在它后面的那样＃34;接下来我想要旋转a，b和c div，这样它们看起来就像是＃34;站起来＆＃34;再次。但似乎我无法做到这一点。我有一个小提琴，我一直在玩，这可能更好地解释了我的问题。

<div class="container">
    <div class="inner-container">
        <div class="a box"></div>
        <div class="b box"></div>
        <div class="c box"></div>        
    </div>
</div>

.container { position:relative; }
.inner-container { margin-left:100px; margin-top:100px; width:200px; height:200px; background-color: rgba(255,0,0,1); left:0px; -webkit-transform: rotateX(90deg); position:absolute; }
.box { width:50px; height:50px; position:absolute; -webkit-transform: rotateX(0deg); }
.a.box { background-color:green; bottom:0; left:0; right:0; margin:auto; }
.b.box { background-color:blue; top:0; left:0; }
.c.box { background-color:yellow; top:0; right:0; }

https://jsfiddle.net/tyf5vdj2/2/

Answer 1

.inner-container

上需要transform-style: preserve-3d

.container { position:relative; -webkit-perspective: 1000;}
.inner-container { margin-left:100px; margin-top:10px; width:200px; height:200px; background-color: rgba(255,0,0,1); left:0px; -webkit-transform: rotateX(90deg); position:absolute; -webkit-transform-style: preserve-3d}
.box { width:50px; height:50px; position:absolute; -webkit-transform: rotateX(0deg); }
.a.box { background-color:green; bottom:0; left:0; right:0; margin:auto;   transform: rotateX(45deg);}
.b.box { background-color:blue; top:0; left:0; }
.c.box { background-color:yellow; top:0; right:0; }

<div class="container">
    <div class="inner-container">
        <div class="a box"></div>
        <div class="b box"></div>
        <div class="c box"></div>        
    </div>
</div>

是否可以在已旋转的X内旋转X.

1 个答案: