質問編集履歴

2 コード編集

NobumitsuHata

NobumitsuHata score 41

2016/08/05 00:02  投稿

【CSS3】rotateYで回転する向きを指定する方法がわからない
キューブ型にしたサイトを回転させてコンテンツを変えているんですが、90度回転ですと右回転、その後さらに90度回転させて180度回転させるときに左回転になってしまいます。
回転する向きを統一する方法はありますか?
```HTML
   <div class="stage">
       <div class="cube">
           <!-- 横回転 -->
           <div id="cube1" class="cube_front active">
               FRONT
           </div>
           <div id="cube2" class="cube_back">
               BACK
           </div>
           <div id="cube3" class="cube_right">
               RIGHT
           </div>
           <div id="cube4" class="cube_left">
               LEFT
           </div>
       </div>
   </div>
   <div class="nav">
       <ul>
           <!-- <li><a data-deg="0" class="active" href="#">0deg</a></li> -->
           <li><a data-deg="90" href="#">90deg</a></li>
           <li><a data-deg="-90" href="#">-90deg</a></li>
       </ul>
   </div>
```
```css
/* id */
/* class */
.stage {
   position: fixed;
   top: 0;
   left: 0;
   -webkit-perspective: 1000;
   -ms-perspective: 1000;
   -o-perspective: 1000;
   -moz-perspective: 1000px;
   perspective: 1000;
}
.cube {
   position: relative;
   margin:0 auto;
   transform-style: preserve-3d;
   transition:all 1s;
}
.cube div {
   position: absolute;
   color: #fff;
   text-align: center;
}
/* 横回転 */
.cube_front {
   top: 0px;
   left: 0px;
   background-image:url(/test/test4.jpg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.cube_back {
   top: 0px;
   left: 0px;
   background-image:url(/test/test3.jpeg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.cube_right {
   top: 0px;
   -webkit-transform: rotateY(90deg);
   transform: rotateY(90deg);
   background-image:url(/test/test2.jpg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.cube_left {
   top: 0px;
   -webkit-transform: rotateY(-90deg);
   transform: rotateY(-90deg);
   background-image:url(/test/test1.jpg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.nav {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
}
.nav li {
   float: left;
   width: 20%;
}
.nav li a{
   display: block;
   width: 100%;
   line-height: 40px;
   text-align: center;
   text-decoration: none;
   color: #fff;
   height: 40px;
   background:rgba(0,0,0,0.6);
   font-size: 13px;
   letter-spacing: 3px;
   transition:all 0.5s ease-in-out;
}
```
```javascript
$(document).ready(function() {
   var wW = $(window).width();
   var wH = $(window).height();
   var deg = 0;
   function setCube(){
       // 横回転
       $('.cube').css({'transform':'translateZ(-' + wW/2 +'px)'});
       $('.cube').css({'width' : wW + 'px', 'height': wH + 'px'});
       $('.cube div').css({'width' : wW + 'px', 'height': wH + 'px'});
       $('.cube_left').css({'left' : '-' + wW/2 + 'px'});
       $('.cube_right').css({'right' :'-' + wW/2 + 'px'});
       $('.cube_front').css({'transform':'translateZ(' + wW/2 + 'px)'});
       $('.cube_back').css({'transform':'translateZ(-' + wW/2 + 'px)'});
   }
   setCube();
   $(".nav a").click(function(event) {
       // 横回転
       event.preventDefault();
       var moveDeg = $(this).data('deg');
       deg = deg + moveDeg;
       $('.cube').css({'transform':'translateZ(-'+wW/1.5+'px)'});
       setTimeout(function(){
           $('.cube').css({'transform':'translateZ(-'+wW/1.5+'px) rotateY('+moveDeg+'deg)'});
           setTimeout(function(){
               $('.cube').css({'transform':'translateZ(-'+wW/2+'px) rotateY('+moveDeg+'deg)'});
               $('.cube').css({'transform':'rotateY(0deg)'});  
               $("#cube1").attr('');  
           },1000);
       },500);
   });
   $(window).on('resize',function(){
       //画面をリサイズした際に各面もリサイズさせる
       setCube();
   });
});
```
  • jQuery

    9988 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    3396 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

1 コード追加

NobumitsuHata

NobumitsuHata score 41

2016/08/04 23:59  投稿

【CSS3】rotateYで回転する向きを指定する方法がわからない
キューブ型にしたサイトを回転させてコンテンツを変えているんですが、90度回転ですと右回転、その後さらに90度回転させて180度回転させるときに左回転になってしまいます。
回転する向きを統一する方法はありますか?
回転する向きを統一する方法はありますか?
```HTML
   <div class="stage">
       <div class="cube">
           <!-- 横回転 -->
           <div id="cube1" class="cube_front active">
               FRONT
           </div>
           <div id="cube2" class="cube_back">
               BACK
           </div>
           <div id="cube3" class="cube_right">
               RIGHT
           </div>
           <div id="cube4" class="cube_left">
               LEFT
           </div>
       </div>
   </div>
   <div class="nav">
       <ul>
           <!-- <li><a data-deg="0" class="active" href="#">0deg</a></li> -->
           <li><a data-deg="90" href="#">90deg</a></li>
           <li><a data-deg="-90" href="#">-90deg</a></li>
       </ul>
   </div>
```
```css
/* id */
/* class */
.stage {
   position: fixed;
   top: 0;
   left: 0;
   -webkit-perspective: 1000;
   -ms-perspective: 1000;
   -o-perspective: 1000;
   -moz-perspective: 1000px;
   perspective: 1000;
}
.cube {
   position: relative;
   margin:0 auto;
   transform-style: preserve-3d;
   transition:all 1s;
}
.cube div {
   position: absolute;
   color: #fff;
   text-align: center;
}
/* 横回転 */
.cube_front {
   top: 0px;
   left: 0px;
   background-image:url(/test/test4.jpg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.cube_back {
   top: 0px;
   left: 0px;
   background-image:url(/test/test3.jpeg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.cube_right {
   top: 0px;
   -webkit-transform: rotateY(90deg);
   transform: rotateY(90deg);
   background-image:url(/test/test2.jpg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.cube_left {
   top: 0px;
   -webkit-transform: rotateY(-90deg);
   transform: rotateY(-90deg);
   background-image:url(/test/test1.jpg);
   background-repeat:no-repeat;
   background-position:center center;
   background-size:cover;
}
.nav {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
}
.nav li {
   float: left;
   width: 20%;
}
.nav li a{
   display: block;
   width: 100%;
   line-height: 40px;
   text-align: center;
   text-decoration: none;
   color: #fff;
   height: 40px;
   background:rgba(0,0,0,0.6);
   font-size: 13px;
   letter-spacing: 3px;
   transition:all 0.5s ease-in-out;
}
```
```javascript
$(document).ready(function() {
   var wW = $(window).width();
   var wH = $(window).height();
   var deg = 0;
   function setCube(){
       // 横回転
       $('.cube').css({'transform':'translateZ(-' + wW/2 +'px)'});
       $('.cube').css({'width' : wW + 'px', 'height': wH + 'px'});
       $('.cube div').css({'width' : wW + 'px', 'height': wH + 'px'});
       $('.cube_left').css({'left' : '-' + wW/2 + 'px'});
       $('.cube_right').css({'right' :'-' + wW/2 + 'px'});
       $('.cube_front').css({'transform':'translateZ(' + wW/2 + 'px)'});
       $('.cube_back').css({'transform':'translateZ(-' + wW/2 + 'px)'});
   }
   setCube();
   $(".nav a").click(function(event) {
       // 横回転
       event.preventDefault();
       var moveDeg = $(this).data('deg');
       deg = deg + moveDeg;
       $('.cube').css({'transform':'translateZ(-'+wW/1.5+'px)'});
       setTimeout(function(){
           $('.cube').css({'transform':'translateZ(-'+wW/1.5+'px) rotateY('+moveDeg+'deg)'});
           setTimeout(function(){
               $('.cube').css({'transform':'translateZ(-'+wW/2+'px) rotateY('+moveDeg+'deg)'});
               $('.cube').css({'transform':'rotateY(0deg)'});
               $("#cube1").attr('');
           },1000);
       },500);
   });
   $(window).on('resize',function(){
       //画面をリサイズした際に各面もリサイズさせる
       setCube();
   });
});
```
  • jQuery

    9988 questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS3

    3396 questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る