ONDrecords【WEBまわりの事をやっております】WEBデザイン・通販システム・予約システムなどが出来ます!

cssでパースの作り方

まずは、大枠のdivなどに、cssのperspective属性を設定する。
この値によって、子要素を回転させる際にパースがつく。

-moz-perspective:500px;
-webkit-perspective:500;
-o-perspective:500;
-ms-perspective:500;

別の方法として、transform属性の値にする方法もある。
※FireFoxは、値にpxをつけないと効かない。

-moz-transform: perspective(200);
-webkit-transform: perspective(200);
-o-transform: perspective(200);
-ms-transform: perspective(200);

次に、パースをつけたい要素のtransform属性に、rotateY(数値deg) or rotateX(数値deg) or rotateZ(数値deg)などを指定すると、
奥行きがつく。

-moz-transform: rotateY(100deg);
-webkit-transform: rotateY(100deg);
-o-transform: rotateY(100deg);
-ms-transform: rotateY(100deg);

アニメーションさせる時は、注意が必要で、
パースの基準点を「動かす要素」の元値に、設定しておかないと動きが変になる。

-moz-transform-origin: center top;
-webkit-transform-origin: center top;
-o-transform-origin: center top;
-ms-transform-origin: center top;

アニメーションの時間は「動かす要素」の元値の、transitionの値で決める。

-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;

Copyright © 2013 ONDrecords. All rights reserved.