POPSブログ

jQuery CSS3 Cubeを回転して画像を切り替える

368

  Category:  jquery2015/09/29 pops 

CSS3 Cubeを回転して画像を切り替えるです。3D画像でCubeを回転して画像切り替えしますが、jquery.transit.jsのtransitionアニメーションを無理矢理応用してみました。Carousel回転も簡単に出来て便利ですが、少しクセが有ります。

 

jQuery CSS3 Cubeを回転して画像を切り替える、テスト


ご注意、Chrome.Firefox.Opera.等、transform-style:preserve-3d対応のモダンブラウザでご覧ください(Chrome推奨)。IE系ブラウザではご覧になれません。但し、Safari、Android系の動作は不明です。


zu

 

CSS3でCubeを作りtransit.jsでアニメーション

CSS3でCube等の構造を作り、transit.jsでアニメーションする試みです。
但し、transform-style:preserve-3dを使用しますので、まだ未対応のブラウザもありますし、且つtransit.jsがZ軸に対応していませんので、完全に機能しない場合も有ります。
それでも、そこそこ動きますので多少は重宝するかも知れません。

 

1. 3Dに未対応のブラウザが多い。(Chrome推奨)
2. transit.jsがZ軸に対応していませんので設定しても機能しないものもある。
(無理やり動かしています、試してみて機能するものだけ利用します)
3. 構造とCSS3設定で大きく違いがあるので試行錯誤が必要です。
4. 現在、transit.js対応はAndroid系が含まれていませんので動作は不明です。


Carouselは出来ていますが、構造が違うため、次回に掲載します。


 

DEMO Cubeを回転して画像を切り替える

● デモページは [ jqury-1.9 ] で動作しています。JS、CSS、は「デモ」ページに掲載しています。


Chromeでの閲覧推奨

DEMO1 CubeをX軸回転

DEMO-028


DEMO2 CubeをY軸回転、2015/10/11/追加。JS CSSなどは「デモ」ページに有ります。

DEMO-028b




 

簡単な説明


CSS3 transition Cubeを回転して画像を切り替える説明


X軸方向に回転しますが、回転方向は切り替え可能です。
一旦、縮小して回転、その後所定の大きさに戻します。 transit.jsを利用しますので複数のtransition()を連続して実行出来ます。(現在、Z軸未対応3Dのため必ず思うようにはならない場合あり)


zuzu

 

このデモでのCSS3の処理は下図の様になります。Cubeの面をそれぞれ前後、上下に移動させて回転させます。
左右は原則見えないため有りません。
Cubeを作る場合は理解し易いので向いているかも知れません。


zuzuzu

 

 

jQuery Transitプラグイン、jquery.transit.js

JSは配布元または、githubから取得できます。各ページに説明などの記載が有りますので読まれるのが良いでしょう。

● 配布元、Web Site: Transit / jquery.transit.min.jsダウンロード可

● githubでのJSのダウンロード : jQuery Transit / jquery.transit.jsダウンロード可

 

デモのHTML JS CSSについて

デモページに記載しています。


HTMLの構造について

他の場合と違い、角丸陰影をつけていますので、1構造多くなっています。(#photo-3d-baseで角丸陰影をつけるとずれる)

私の習性として「角丸陰影」は絶対条件なのです。


<div id="base-wrap">
	<div id="photo-3d-base">
		<div id="photo-3d-wrap">
			<div id="photo-front" class="photo-3d"></div>
			<div id="photo-back" class="photo-3d"></div>
			<div id="photo-top" class="photo-3d"></div>
			<div id="photo-bottom" class="photo-3d"></div>
		</div>
	</div>
</div>

CSS3について

z-indexの位置に注意ください。設定がちがうと、3Dが消えたり角丸に成らなかったりします。
この構造での、CSS3設定で大事なことは、rotateX translateZ の設定順序を次の様にして下さい。
順序が違うと構造が出来ません。
(理由はわかりません、フシギちゃんです)


最重要。この構造では全ての部材のtransform設定は、rotateX()を最後に書くこと。


rotateXを最後に書く

#photo-back{
transform:translateZ(-150px) rotateX(180deg);
background-image:url("/main/images/flight03.jpg");
}
----------------------------------------------------

これはダメです

#photo-back{
transform:rotateX(180deg) translateZ(-150px);
background-image:url("/main/images/flight03.jpg");
}

JSについて

説明用に下記でJSを表示します。

DEMOのJS


//transition-3d-photo.js
//X軸3D回転

(function($){

	$(function () {

		//初期設定
		//-----------------------------------------------------

		var transit_speed=1200;//3D速度
		var scale_speed=600;//縮小拡大速度
		var scale_v=0.65;//縮小値 0.5-0.8

		//角丸、陰影必要でないなら削除する
		$('#base-wrap').css({borderRadius:'10px',boxShadow:'0 0 10px #000'});

		//-----------------------------------------------------

		var moveflag=false;//アニメ中判定

		//オブジェクト保存
		var photo_3d_base=$('#photo-3d-base');
		var photo_3d_wrap=$('#photo-3d-wrap');
		var photo_front=$('#photo-front');
		var photo_back=$('#photo-back');
		var photo_top=$('#photo-top');
		var photo_bottom=$('#photo-bottom');

		//translateZは軸位置移動
		//photo_3d_wrap.css({transform:'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -150, 1)'});
		//これでもOKこちら利用
		photo_3d_wrap.css({transform:'translateZ(-150px)'});

		//最初からY時軸方向を回転させておく
		//photo_3d_wrap.css({transform:'rotateY(-30deg)'});

		//重要、初期のCSS設定/どんな場合も必要です
		photo_3d_wrap.css({scale:[1,1],rotateX:0});

		//3D回転/delayはdelay()でするFirefox180度対策
		function rotate3d_box(angle){

			moveflag=true;//回転中判定

			//縮小
			photo_3d_wrap.transition({scale:[scale_v,scale_v]},scale_speed,function(){

				//3D回転
				$(this).delay(250).transition({rotateX:angle},transit_speed,"linear",function(){

					//縮小を戻す
					$(this).delay(250).transition({scale:[1,1]},scale_speed,function(){

						moveflag=false;
					});

				});

			});

		}

		//クリックアクション/回転はマイナス設定
		$("#rotateChg-box span").each(function(i){
			var hitno=i;
			var angle=0;
			$(this).click(function(e) {

				if(moveflag){return false;}

				$(this).addClass("setcolored");
				$(this).siblings("span").removeClass("setcolored");

				if( hitno == 0) {angle=0;rotate3d_box(angle);}
				if( hitno == 1) {angle=-90;rotate3d_box(angle);}
				if( hitno == 2) {angle=-180;rotate3d_box(angle);}
				if( hitno == 3) {angle=-270;rotate3d_box(angle);}

				return false
			});
		});

	});

})(jQuery);


JSの中での .css() のtransform設定が可能です。但しCSSだけでtransitionアニメーションの中では使えません。
次の様な記述方法が可能です。


CSS設定はOK

オブジェクト.css({transform:'rotateZ(-15deg)'});

よって、Cubeの面のCSSも次の様にJS側で設定可能です。(動的にも生成可能になります)


//オブジェクト保存
var photo_front=$('#photo-front');
var photo_back=$('#photo-back');
var photo_top=$('#photo-top');
var photo_bottom=$('#photo-bottom');

//JSで設定する場合
photo_front.css({transform:'translateZ(150px) rotateX(0deg)'});
photo_back.css({transform:'translateZ(-150px) rotateX(180deg)'});
photo_top.css({transform:'translateZ(0px) translateY(-150px) rotateX(90deg)'});
photo_bottom.css({transform:'translateZ(0px) translateY(150px) rotateX(-90deg)'});

CSSの書式はアニメーションの書式と同じですから、アニメーションしますが、終了と共に乱れます。
matrix3dで内部処理がなされていると思うのですが少し特殊なようです。(無理やり transition() ですから...)
つまり、現在、transit.jsのアニメーションでは使用出来ません。将来対応してくれるのか判りませんが...


アニメーションするが、そのあと乱れるので使えない

var photo_3d_wrap=$('#photo-3d-wrap');
//アニメーション
photo_3d_wrap.transition({transform:'rotateZ(-15deg)'},速度,function(){

	//ここで狂う、他にも影響があります

});

全て、matrix3dで処理すれば良いのですが....、テスト的に試みてはいますが、現在、連続のアニメーション出来るには至っていません。(そのうちナントカなるでしょう、無理かな)


perspectiveが設定時の画像縮尺について

前面に表示される画像は、perspectiveが設定されているため遠近感がでて、前面が拡大、後が縮小されますから、デモの様に画像の大きさとステージ(ベースのDIV)が同じ場合、画像の大きさを合わせることが困難です。
その様な場合に中心位置まで、translateZを後退させれば、最前面の縮尺は同じになります。


画像ラップは初期状態で大きさなど操作していませんから、


//translateZは軸位置移動
//photo_3d_wrap.css({transform:'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -150, 1)'});

//これでもOK
photo_3d_wrap.css({transform:'translateZ(-150px)'});

「デモ」で640x300サイズ画像が、640x300サイズDIVの中に「同じ大きさ」で表示されているのは、上記のtranslateZ修正を行っているからです。


jquery.transit.jsでは、まだ「z」には未対応ですから次はエラーになりますので、現時点ではダメです。


//未対応エラー
photo_3d_wrap.css({z:'-150px'})

transition()アニメーションについて

transit.jsではIE系がまだ機能しませんので、transform-style:preserve-3d に未対応です。
transform-style:preserve-3d 設定のオブジェクトをtransition()アニメーションするのですから、正常に機能しないのは当然です。(transit.jsがZ軸に対応すれば多少違ってくるかも知れない...)


重要、transit.jsで動かす故、transition()アニメーション前に「transit.jsの書式でCSSを初期化」します。
先に処理しないと、最初 perspective が狂います。その他も影響があるかも....


//重要、初期のCSS設定
photo_3d_wrap.css({scale:[1,1],rotateX:0});


photo_3d_wrap.transition({処理の書式},速度,function(){

	//3D回転
	$(this).delay(250).transition({rotateX:角度の値},速度,"linear",function(){

		$(this).delay(250).transition({処理の書式},速度,function(){

			//
		});

	});
});

HTML構造とtransition()アニメーションについて

HTML構造でも、多少違いがありますが、一応、transition()アニメーションが使用できるのが最大の利点です。
多少の振る舞いの違いは出ますが、基本的にtransit.jsが使えますので、有り難いことです。


IMG構造で記述する

デモではDIV構造ですが、IMG構造で記述することも出来ます。



<div id="photo-3d-wrap">
	<div id="photo-front" class="photo-3d" src="画像URL" />
	<div id="photo-back" class="photo-3d" src="画像URL" />
	<div id="photo-top" class="photo-3d" src="画像URL" />
	<div id="photo-bottom" class="photo-3d" src="画像URL" />
</div>

最初からY時軸方向を回転させておく

説明図、右の状態でX軸を回転させると言う動作です。


面の要素にtranslateYを設定している部分がありますので、transition()でのrotateYは一部ねじ曲がります。
下記の様に「最初からY時軸方向を回転させておく」ことは可能です。構造を変えれば正常に回転できます。
これは、次回の、別途構造のCarouselで言及します。



//最初からY時軸方向を回転させておく
photo_3d_wrap.css({transform:'rotateY(-30deg)'});

--------------------------------------------------------

2つ一緒にしても、次は表示位置が違う

photo_3d_wrap.css({transform:'translateZ(-150px) rotateY(-30deg)'});
photo_3d_wrap.css({transform:'rotateY(-30deg) translateZ(-150px)'});

構造によって、振る舞いが違います。必ず旨くゆくとは限りません。


画像

サンプル画像 / 原則 使用者が用途に応じてご用意ください。デモページより取得できます。

 

最後に

transit.jsのバージョンアップなどの事由、または、transform-style:preserve-3d 対応に変わったりした時は書き換える可能性があります。
JSの変更などは自由ですが、問題がでましたら自己解決ください。


構造のCSSおよび、Transformsについては次のサイトが参考になります。

【参考】unformedbuilding.comの記事: CSS Transforms についてのメモ

Carouselタイプのものですが、このページのものもCarouselタイプで作成可能です。

【参考】当方の記事: jQuery CSS3 3D回転Carouselをtransit.jsで処理する


以上です。

 


[ この記事のURL ]


タグ:css3 , Transition , jquery

 

ブログ記事一覧



[1]