このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.03.29

css3 回転 transform rotate()

css3で要素を回転させる transformプロパティの使用方法です。

transform:rotate()を使い回転させましょう。

【回転】

rotate(回転角度)

角度による2D回転の指定を行えます。

[code]-webkit-transform: rotate(0deg);[/code]

rotateX(回転角度)

X軸を軸とする角度によって時計回りの回転の指定ができます。

[code]-webkit-transform: rotateX(0deg);[/code]

rotateY(回転角度)

Y軸を軸とする角度によって時計回りの回転を指定ができます。

[code]-webkit-transform: rotateY(0deg);[/code]

rotateZ(回転角度)

Z軸を軸とする角度によって時計回りの回転を指定ができます。

[code]-webkit-transform: rotateZ(0deg);[/code]

これらを使って回転するアニメーションを作りましょう。

適当にdivを作成。そしてcssも適当に設定させて頂きます。

[code]#rX ,
#rY ,
#rZ {
width: 200px;
height: 100px;
background: #000;
border: #f00 2px solid;
color: #fff;
}[/code]

そしたらアニメーションの設定を!

[code]@-webkit-keyframes[/code]

を使い、アニメーションの設定を行います。

X軸回転

[code]
@-webkit-keyframes turnX{
0%{-webkit-transform: rotateX(0deg);}
100%{-webkit-transform: rotateX(360deg);}
}[/code]

Y軸回転

[code]
@-webkit-keyframes turnY{
0%{-webkit-transform: rotateY(0deg);}
100%{-webkit-transform: rotateY(360deg);}
}[/code]

Z軸回転

[code]@-webkit-keyframes turnZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
}[/code]

それぞれのdivにマウスオーバーするとアニメーションするように設定します。

animation-nameはturnX,turnY,turnZをそれぞれ設定。

animation-durationで一回分の長さの設定。
animation-iteration-countは何回行うか?
また、マウスオーバーがわかるようにopacityで透過50%にしています。

[code]#rX:hover{
-webkit-animation-name: turnX;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
opacity:0.5;
}[/code]

デモページはこちらから

webkit搭載ブラウザ(safari ,Google Chrome)のみ確認できます。

これをperspectiveで遠近感の設定を追加して行きます。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。