キューブ型にしたサイトを回転させてコンテンツを変えているんですが、90度回転ですと右回転、その後さらに90度回転させて180度回転させるときに左回転になってしまいます。
回転する向きを統一する方法はありますか?
HTML
1 <div class="stage"> 2 <div class="cube"> 3 <!-- 横回転 --> 4 <div id="cube1" class="cube_front active"> 5 FRONT 6 </div> 7 <div id="cube2" class="cube_back"> 8 BACK 9 </div> 10 <div id="cube3" class="cube_right"> 11 RIGHT 12 </div> 13 <div id="cube4" class="cube_left"> 14 LEFT 15 </div> 16 </div> 17 </div> 18 <div class="nav"> 19 <ul> 20 <!-- <li><a data-deg="0" class="active" href="#">0deg</a></li> --> 21 <li><a data-deg="90" href="#">90deg</a></li> 22 <li><a data-deg="-90" href="#">-90deg</a></li> 23 </ul> 24 </div>
css
1 2/* id */ 3 4 5/* class */ 6 7.stage { 8 position: fixed; 9 top: 0; 10 left: 0; 11 -webkit-perspective: 1000; 12 -ms-perspective: 1000; 13 -o-perspective: 1000; 14 -moz-perspective: 1000px; 15 perspective: 1000; 16} 17 18.cube { 19 position: relative; 20 margin:0 auto; 21 transform-style: preserve-3d; 22 transition:all 1s; 23} 24 25.cube div { 26 position: absolute; 27 color: #fff; 28 text-align: center; 29} 30 31/* 横回転 */ 32.cube_front { 33 top: 0px; 34 left: 0px; 35 background-image:url(/test/test4.jpg); 36 background-repeat:no-repeat; 37 background-position:center center; 38 background-size:cover; 39} 40 41.cube_back { 42 top: 0px; 43 left: 0px; 44 background-image:url(/test/test3.jpeg); 45 background-repeat:no-repeat; 46 background-position:center center; 47 background-size:cover; 48} 49 50.cube_right { 51 top: 0px; 52 -webkit-transform: rotateY(90deg); 53 transform: rotateY(90deg); 54 background-image:url(/test/test2.jpg); 55 background-repeat:no-repeat; 56 background-position:center center; 57 background-size:cover; 58} 59 60.cube_left { 61 top: 0px; 62 -webkit-transform: rotateY(-90deg); 63 transform: rotateY(-90deg); 64 background-image:url(/test/test1.jpg); 65 background-repeat:no-repeat; 66 background-position:center center; 67 background-size:cover; 68} 69 70.nav { 71 position: fixed; 72 bottom: 0; 73 left: 0; 74 width: 100%; 75} 76.nav li { 77 float: left; 78 width: 20%; 79} 80.nav li a{ 81 display: block; 82 width: 100%; 83 line-height: 40px; 84 text-align: center; 85 text-decoration: none; 86 color: #fff; 87 height: 40px; 88 background:rgba(0,0,0,0.6); 89 font-size: 13px; 90 letter-spacing: 3px; 91 transition:all 0.5s ease-in-out; 92} 93
javascript
1$(document).ready(function() { 2 var wW = $(window).width(); 3 var wH = $(window).height(); 4 var deg = 0; 5 6 function setCube(){ 7 // 横回転 8 $('.cube').css({'transform':'translateZ(-' + wW/2 +'px)'}); 9 $('.cube').css({'width' : wW + 'px', 'height': wH + 'px'}); 10 $('.cube div').css({'width' : wW + 'px', 'height': wH + 'px'}); 11 $('.cube_left').css({'left' : '-' + wW/2 + 'px'}); 12 $('.cube_right').css({'right' :'-' + wW/2 + 'px'}); 13 $('.cube_front').css({'transform':'translateZ(' + wW/2 + 'px)'}); 14 $('.cube_back').css({'transform':'translateZ(-' + wW/2 + 'px)'}); 15 } 16 17 setCube(); 18 19 $(".nav a").click(function(event) { 20 // 横回転 21 event.preventDefault(); 22 var moveDeg = $(this).data('deg'); 23 deg = deg + moveDeg; 24 $('.cube').css({'transform':'translateZ(-'+wW/1.5+'px)'}); 25 setTimeout(function(){ 26 $('.cube').css({'transform':'translateZ(-'+wW/1.5+'px) rotateY('+moveDeg+'deg)'}); 27 setTimeout(function(){ 28 $('.cube').css({'transform':'translateZ(-'+wW/2+'px) rotateY('+moveDeg+'deg)'}); 29 },1000); 30 },500); 31 }); 32 33 $(window).on('resize',function(){ 34 //画面をリサイズした際に各面もリサイズさせる 35 setCube(); 36 }); 37 38});
回答3件
あなたの回答
tips
プレビュー