POPSブログ

jQuery CSS3 transition 3D正六面体Cubeを回転する

372

  Category:  jquery2015/10/28 pops 
CSS3 で作った正六面体Cubeをjquery.transit.jsのtransitionアニメーションで回転させます。無理矢理応用していますが簡単に出来て便利です。当然少しクセが有りますが、ここでは改造jquery.transit.jsを使用しています。

 

jQuery transition 3D正六面体Cubeを回転する、テスト


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


zu

 

jQuery transition 3D正六面体Cubeを回転する

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


1-2分の改造でZ軸対応に改造します。

● jquery.transit.jsの改造は[ jQuery CSS3 3D回転Carouselをtransit.jsで処理する ]を参照ください。(至極簡単)

 

DEMO jQuery transition 3D正六面体Cubeに背景画像をいれて回転表示

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


Chromeでの閲覧を推奨します

3D正六面体Cubeに背景画像をいれて回転表示デモ (改造jquery.transit.jsを使用)

DEMO-032




 

簡単な説明


jQuery transition 3D正六面体Cubeを回転するの説明


Carouselと同じ作りにして、上下2つを被せた作りにしました。
一旦、縮小して回転、その後所定の大きさに戻します。 transit.jsを利用しますので複数のtransition()を連続して実行出来ます。ここがCSS3だけの操作と違う点だと思います。

 

デモのHTML JS CSSについて

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


HTMLの構造について

名前は変わっていますが、Carouselと同じ構造です。CSSもまったく同じです。

私の習性として「角丸陰影」はこだわりの絶対条件、陰影がずれるので1階層増やしています。


<div id="cube-base-wrap">
	<div id="cube-3d-base">
		<div id="cube-3d"></div>
	</div>
</div>

HTML側に記載も可能ですが。JS側で生成した方が簡単です。


JSについて

説明用に下記で「デモ」のJSを表示します。transition-cube.jsの例

DEMOのJS

注意、改造jquery.transit.jsを使用しています。


//transition-cube.js
//正六面体Cube背景画像
//Carousel形式でつくる

(function($){

	$(function () {

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

		var transit_speed=800;//3D速度
		var scale_speed=600;//縮小拡大速度
		var scale_v=0.75;//縮小値

		//ベースの大きさ
		var bace_W=640;
		var bace_H=300;
		//エレメントの大きさ
		var elem_W=200;
		var elem_H=200;

		//半径
		var radius=elem_W/2;
		var photoUrls=[
			'/main/images/lady01m.jpg',
			'/main/images/lady02m.jpg',
			'/main/images/ana.jpg',
			'/main/images/lady03m.jpg',
			'/main/images/abarerukun.jpg',
			'/main/images/syaraku-kun.jpg'
			];

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

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

		//エレメントの数
		var carousel_len=6;//固定

		//配置角度初期値
		var rotate_X=[0,0,0,0,90,-90];
		var rotate_Y=[0,90,180,270,0,0];
		//または
		//var rotate_Y=[0,90,180,270,90,90];

		var moveflag=false;//アニメ中判定
		var elem=[];//エレメント保存用

		//オブジェクト保存
		var carousel_3d_base=$('#cube-3d-base');
		var carousel_3d=$('#cube-3d');

		//エレメント配置角度の計算
		var eleme_angle=360/carousel_len;

		//改造JS使用
		for (var i=0; i < carousel_len; i++) {

			var deg_v=i*eleme_angle + "deg";

			var id_name="cube-elem" + i;
			var html='<div id="' + id_name + '" class="cubepanel-3d">' + i + '</div>';
			carousel_3d.append(html);
			elem[i]=$("#cube-elem" + i);

			//CSS3設定、rotateYを先に
			elem[i].css({rotateY:rotate_Y[i],rotateX:rotate_X[i],translateZ:radius});

			//背景画像
			elem[i].css({'backgroundImage':'url(' + photoUrls[i] + ')'});

		}

		//ボタンをつくる
		var btnhtml="";
		for (var i=0; i < carousel_len; i++) {
			btnhtml=btnhtml + '<span class="my-btn">' + i + '</span>';
		}
		$('#rotateChg-box').append('<p>' + btnhtml + '</p>');
		$('#rotateChg-box').find('span').eq(0).addClass('setcolored');

		//移動と回転
		carousel_3d.css({translateZ:-radius,rotateX:20,rotateZ:30});//原寸傾斜
		//carousel_3d.css({translateZ:radius,rotateX:0,rotateZ:0});拡大傾斜なし

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

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

			moveflag=true;//回転中判定

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

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

					//縮小を戻す
					$(this).delay(250).transition({scale:[1,1],scaleZ:1},scale_speed,function(){
						//完了
						moveflag=false;

					});

				});

			});

		}

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

				if(moveflag){return false;}

				$(this).addClass("setcolored");
				$(this).siblings("span").removeClass("setcolored");
				//マイナス値
				rotate3d_box(-rotate_X[hitno],-rotate_Y[hitno])

				return false;
			});
		});

	});

})(jQuery);



改造jquery.transit.jsについて

transform-style:preserve-3dのものを動かすにはZ軸の制御が不可欠ですが、現在jquery.transit.jsでは未対応ですので、必要に迫られ当方が勝手に改造したものです。(近い将来には正式対応すると予測していますが...)
よって、「改造JS」使用で当方が責任をもつものではありません。


縦横同じ大きさ(正方形)の画像を用います

原則、正方形ですが違う大きさにする事も可能と思います。多少面倒になるでしょう。

原則、画像はパネルと同じ大きさのものを使用します。背景画像をポジションで移動する場合はFirefoxのCSSに注意ください。
Firefoxで backgroundPosition は機能しません。その他の問題も出ますので、縦横同じ大きさの画像を背景処理します。

 

3D本体のtranslateZ調整

3D本体つまりパネルをラップした、オブジェクトcarousel_3dのtranslateZ調整すると大きさが変わります。通常3Dである為手前が拡大されます。画像を原寸表示するには、ラップのtranslateZを半径分マイナスすると良い。
また全体の回転などをも設定可能です。画像拡大はperspective値により変化します。

rotateX、rotateYはアニメでも変化させていますので、注意ください。



半径は画像の大きさの半分です 画像が200x200なので100
//半径
var radius=elem_W/2;

//画像原寸表示と回転
carousel_3d.css({translateZ:-radius,rotateX:20,rotateZ:30});

//画像拡大、回転無し
carousel_3d.css({translateZ:radius,rotateX:0,rotateZ:0});

アニメ前のCSS設定

アニメで動かすものは初期時に「初期のCSS設定」が必要です。設定が悪いと始めに3Dが歪んだりします。

注意、jquery.transit.jsの書式で記述します。



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

アニメ中でのZ軸の変更

改造jquery.transit.jsを使用していますので、Z軸の変更が可能ですが、正式なものでは有りませんので、「書式」は限られていますので注意ください。

下記、scaleZ:scale_vの様にscaleZ変更を追加している。



//縮小
carousel_3d.transition({scale:[scale_v,scale_v],scaleZ:scale_v},...

正式なものではないので下記のようには書けない、エラーになるブラウザもある
{scale:[scale_v,scale_v,scale_v]}

番号の削除

選定番号をあわせるためにパネルに番号をいれていますが、次の様に削除できる。タイトルなど挿入にも利用はできますが....



番号あり
var html='<div id="' + id_name + '" class="cubepanel-3d">' + i + '</div>';

番号無し
var html='<div id="' + id_name + '" class="cubepanel-3d"></div>';

角丸陰影について

構造を変更したりした場合、Firefoxで角丸陰影処理出来ない場合も有ります。通常z-indexを設定するなどで修正できますが、場合によっては「角丸」処理出来ないことが生じます。(Firefoxのバグと思います)

その他、ブラウザにより違いなどありますが、完全にCSS3対応までには少し年月を要すると思われます。適当にゴマカシましょう。


通常のjquery.transit.jsを使用する場 合(参考)

通常のjquery.transit.jsはZ軸に対応していませんので、CSSをJSで設定する時、transformを利用することになりますが、制約も多く3D本体が歪んだり回転軸がずれたりすることが有ります。また当然アニメ中でZ軸の制御は出来ません。
Firefoxではかなり厳しい状態です。いつの日にか、正式にjquery.transit.jsがZ軸に対応するのを待つほか方法は無い。


参考、通常のjquery.transit.js用に transition-cube-b.js を作ってありますが....

アニメでZ軸の制御ができないため、パネルの場所によりスケールが違ったり、不要な伸縮などあり少々違和感があります。動作します程度になります。(3Dを2Dでアニメするのだから当然のこと)


CSSでの、Z軸などは、transformで設定しますが、色々と制約がありますので、CSSの初期設定で用います。


1. transformでの設定は初回に1回限りが原則です。(変更は順序どおりに再設定する、難しい、またtransformでのCSS設定がtransit.jsで正式に対応している訳ではない)
2. 複数の設定があれば、一括に1回で設定すること。(個別にすると、前の設定は上書きで無くなる)
3. アニメ中では使用できません。上書きされてメチャクチャに成ります。
4. ひずみなど多く、正六面体Cubeでは利用できないと思う。
5. 表示品質が良くないのでデモは有りません。JSは「デモページ」に有ります。



例
//transform形式CSS3設定、rotateYを先に
elem[i].css({'transform':'rotateY(' + rotate_Y[i] + 'deg) rotateX(' + rotate_X[i] + 'deg) translateZ(' + radius + 'px)'});

//transform形式移動と回転
var radius_v=radius*-1;
carousel_3d.css({'transform':'translateZ(' + radius_v + 'px' + ') rotateX(20deg) rotateZ(30deg)'});//原寸傾斜

注意、文字形なので旨く記述しないと表示および動作しません。大変です。


画像

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

 

最後に

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


Carouselタイプのものです。基本的なことなので参照ください。改造jquery.transit.jsも極簡単に作れます。

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

同じCube形式ですが、X軸回転、またはY軸回転の専用タイプです。(改造JSでは無いので多少ひずみなどあり)

【参考】当方の記事: jQuery CSS3 Cubeを回転して画像を切り替える


以上です。

 


[ この記事のURL ]


タグ:jquery , Transition , css3

 

ブログ記事一覧



[1]