I have a collection of 3 divs labeled a, b and c inside a container. The container is rotatedX by 90 degrees, giving the appearance that it is "lying on its back". Now, I am trying to rotate the a, b, and c divs so they appear to be "standing up" again. However, I am facing difficulties in achieving this effect. To better illustrate my issue, I have created a 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; }