是否可以在已经旋转的 X 中旋转 X

Question

我有一个包含 3 个 div、a b 和 c 的容器。容器旋转了 X 90 度，所以它就像容器 "laying on it's back"。接下来我想旋转 a、b 和 c div，这样它们看起来又像是 "standing up"。但我似乎无法做到这一点。我有一个 fiddle 我一直在玩它也许能更好地解释我的问题。

<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

您需要 transform-style: preserve-3d .inner-container

.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

Is it possible to rotateX inside an already rotatedX

html

css

css-transforms