質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

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

jQuery

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

Q&A

解決済

3回答

3072閲覧

【CSS3】rotateYで回転する向きを指定する方法がわからない

NobumitsuHata

総合スコア141

CSS3

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

jQuery

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

0グッド

0クリップ

投稿2016/08/04 14:42

編集2016/08/04 15:02

キューブ型にしたサイトを回転させてコンテンツを変えているんですが、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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/04 14:48

具体的にHTMLおよびCSS、JavaScriptなどを質問文に追記いただいたほうが回答を得られやすいと思います。
guest

回答3

0

-90だと90から0に数字が減っていってマイナスに向かっていきますね。
180degならば右回転になります。
じゃあ90に戻すときは…左回転です。

そのまま右回転で戻したいならば、360、0を経由するようなanimation指定をしないといけないです。

投稿2016/08/04 15:47

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

css()で相対変化量のmoveDegをrotateに指定していますが、これでは永遠に90deg or -90degしか回転しません。ここはdegの間違いかなと思いました。
そもそも現在の変形状態から次の変形状態に持っていく(例:90deg→180deg)なら、animate()などの方がいい気がしますが、どうでしょうか。

投稿2016/08/04 16:15

NS-DOS

総合スコア110

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

NobumitsuHata

2016/08/04 22:11

おっしゃる通りdegでした!
guest

0

雑ですが。

CSS

1.anim { 2-webkit-animation-name: roundy; 3-webkit-animation-timing-function: ease-in-out; 4-webkit-animation-iteration-count: once; 5-webkit-animation-duration: 5s; 6 -moz-animation-name: roundy; 7 -moz-animation-timing-function: ease-in-out; 8 -moz-animation-iteration-count: once; 9 -moz-animation-duration: 5s; 10 animation-name: roundy; 11 animation-timing-function: ease-in-out; 12 animation-iteration-count: once; 13 animation-duration: 10s; 14} 15@-webkit-keyframes roundy { 16 0% { transform: translateZ( calc(100vw / 1.5 * -1) ); } 17 25% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); } 18 50% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); } 19 75% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); } 20 100% { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); } 21} 22 @-moz-keyframes roundy { 23 0% { transform: translateZ( calc(100vw / 1.5 * -1) ); } 24 25% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); } 25 50% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); } 26 75% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); } 27 100% { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); } 28} 29 @keyframes roundy { 30 0% { transform: translateZ( calc(100vw / 1.5 * -1) ); } 31 25% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 90deg ); } 32 50% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 180deg ); } 33 75% { transform: translateZ( calc(100vw / 1.5 * -1) ) rotateY( 270deg ); } 34 100% { transform: translateZ( calc(100vw / 2.0 * -1) ) rotateY( 360deg ); } 35} 36```**動くサンプル:**[https://jsfiddle.net/12u0tzoh/1/](https://jsfiddle.net/12u0tzoh/1/) 37 38 39--- 40 41【CSS アニメーション - CSS | MDN】 42[https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations) 43 44【[CSS]あなたのウェブページにキーフレームを使ったアニメーションをちょこっと適用するチュートリアルのまとめ | コリス】 45[http://coliss.com/articles/build-websites/operation/css/enhance-your-sites-with-css3-animations-by-onextrapixel.html](http://coliss.com/articles/build-websites/operation/css/enhance-your-sites-with-css3-animations-by-onextrapixel.html) 46 47【animation-name-CSS3リファレンス】 48[http://www.htmq.com/css3/animation-name.shtml](http://www.htmq.com/css3/animation-name.shtml)

投稿2016/08/04 15:53

編集2016/08/04 15:53
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問