var boxTranslateX = 0; var boxTranslateY = 0; var boxTranslateZ = -300; var rotateX = -25; var rotateY = -45; var rotateZ = 0; $(function() { angleEngine(); $("#btn_1").click(function(){ rotateY = -90; angleEngine(); }); $("#btn_2").click(function(){ rotateY = -180; angleEngine(); }); $("#btn_3").click(function(){ rotateY = -270; angleEngine(); }); $("#btn_reset").click(function(){ boxTranslateX = 0; boxTranslateY = 0; boxTranslateZ = 0; rotateX = 0; rotateY = 0; rotateZ = 0; angleEngine(); }); function angleEngine() { $("#box").css({ "-webkit-transition-duration":"2s", "-moz-transition-duration":"2s", "-webkit-transform": 'translate3d( ' + boxTranslateX + 'px, ' + boxTranslateY+'px, '+boxTranslateZ+'px) rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) rotateZ('+rotateZ+'deg)', "-moz-transform": 'translate3d( '+boxTranslateX+'px, '+ boxTranslateY+'px, '+boxTranslateZ+'px) rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) rotateZ('+rotateZ+'deg)' }); } });
<section id="container"> <div id="box" class=""> <li class="front">1</li> <li class="back">2</li> <li class="right">3</li> <li class="left">4</li> <li class="top">5</li> <li class="bottom">6</li> </div> </section> <section id="option-1"> <button id="btn_1">show 1</button> <button id="btn_2">show 2</button> <button id="btn_3">show 3</button> <button id="btn_reset">reset</button> </section>
body { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 12px; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; color: #333; background-color: #E1DFD9; } #option-1 { width: 500px; position: relative; z-index: 100; margin-bottom: 60px; margin: 0 auto 40px; } #box li { margin: 0; } #container { width: 500px; height: 400px; background: #FFF; overflow: hidden; z-index: 60; position: relative; margin: 20px auto 30px; border: 1px solid #CCC; -webkit-perspective: 900px; -moz-perspective: 900px; } #box { width: 300px; height: 300px; top: 50px; left: 100px; background: hsla( 000, 30%, 50%, 0.2 ); position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -webkit-transform: translateX( 0px ) translateY( 0px ) translateZ( 0px ) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ); -moz-transform: translateX( 0px ) translateY( 0px ) translateZ( 0px ) rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ); } #box li { display: block; position: absolute; border: 1px solid #797979; line-height: 196px; font-size: 90px; text-align: center; font-weight: bold; color: white; } #box.panels-backface-invisible figure { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; } #box .front, #box .back { width: 300px; height: 300px; } #box .right, #box .left { width: 300px; height: 300px; left: 0px; } #box .top, #box .bottom { width: 300px; height: 300px; top: 50px; line-height: 96px; } #box .front { background: hsla( 000, 100%, 50%, 0.4 ); } #box .back { background: hsla( 160, 100%, 50%, 0.4 ); } #box .right { background: hsla( 120, 100%, 50%, 0.4 ); } #box .left { background: hsla( 180, 100%, 50%, 0.4 ); } #box .top { background: hsla( 240, 100%, 50%, 0.4 ); } #box .bottom { background: hsla( 300, 100%, 50%, 0.4 ); } #box .front { -webkit-transform: translateX(0px) translateY(0px) translateZ( 150px ); -moz-transform: translateX(0px) translateY(0px) translateZ( 150px ); } #box .back { -webkit-transform: rotateX( 0deg ) rotateY(-180deg) translateX(0px) translateY(0px) translateZ( 150px ); -moz-transform: rotateX( 0deg ) rotateY(-180deg) translateX(0px) translateY(0px) translateZ( 150px ); } #box .right { -webkit-transform: rotateY( 90deg ) translateX(0px) translateY(0px) translateZ( 150px ); -moz-transform: rotateY( 90deg ) translateX(0px) translateY(0px) translateZ( 150px ); } #box .left { -webkit-transform: rotateY( -90deg ) translateX(0px) translateY(0px) translateZ( 150px ); -moz-transform: rotateY( -90deg ) translateX(0px) translateY(0px) translateZ( 150px ); } #box .top { -webkit-transform: rotateX( 90deg ) translateX(0px) translateY(0px) translateZ( 200px ); -moz-transform: rotateX( 90deg ) translateX(0px) translateY(0px) translateZ( 200px ); } #box .bottom { -webkit-transform: rotateX( -90deg ) translateX(0px) translateY(0px) translateZ( 100px ); -moz-transform: rotateX( -90deg ) translateX(0px) translateY(0px) translateZ( 100px ); }