CODEWITHSUNDEEP
google-chromecsswebkitwebkit-transform
David C.
David C.

Reputation: 253

css3 multiple 3d rotation

I would like to rotate a face of a cube twice and have that one face fall flat on one side.

Here is an illustration as to what I'm trying to achieve:
https://i.sstatic.net/kwO8Z.png

I put what I have here for now, note I'm using 45 degrees to show my progress as 90 degrees hides the shape. http://jsfiddle.net/s6jwC/1/

<div id="stage">
    <div id="cube">
        <div id="cube_content">
        </div>
    </div>
</div>

#stage {
    -webkit-perspective: 400px;
    position: relative;
}

#cube {
    width: 128px; height: 128px;
    -webkit-transform: rotateY(45deg);   
    position: absolute;
   left: 200px; top: 30px;
}

#cube_content {
    width: 128px; height: 128px;
    -webkit-transform: rotateX(45deg);
    position: absolute;
    left: 0; top: 0;
    background: rgba(255, 0, 0, 0.7);
    -webkit-transform-origin: 0% 100%;
}

Thank you!

Upvotes: 0

Views: 898

Answers (1)

David C.
David C.

Reputation: 253

Ok, found the answer by learning more about 3d transforms. It came to applying a -webkit-transform-style attribute to the parent transformed element so that the child would be able to use the preserved 3d state of its parent.

Adding this line solves my problem:

#cube {
    ...
    -webkit-transform-style: preserve-3d;
}

Here's an updated jsfiddle with the change applied: http://jsfiddle.net/s6jwC/3/

Upvotes: 1

Related Questions