css - 3d Cube to show 3 sides at a time -

css - 3d Cube to show 3 sides at a time -

i've been looking @ different tutorials create rotating 3d cube in css3. tutorial the-art-of-the-web 1 i've decided leverage.

my end goal have similar this:

i want final state show 3 sides of cube. i'd need rotate entire cube bottom corner between a , t pointing down.

working fiddle (-webkit)

@-webkit-keyframes spincube { { -webkit-transform: rotatex(0deg) rotatey(0deg) rotatez(0deg); } { -webkit-transform: rotatey(-180deg) rotatez(90deg) rotatez(15deg); } }

see demo

-moz-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards;

this way can preserve animation state.

css css3 3d css-transitions css-animations