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

web帳

記事詳細

2011.11.19

CSS3 transform:rotate() 要素を回転表示する

transformプロパティのrotate()を使う事によって要素を回転表示することができます。

transformプロパティのまとめはこちらから。

rotate(回転角度) : rotate()関数では、角度によって2D回転を指定。

rotateX(回転角度) : X軸を軸とする角度によって時計回りの回転を指定。

rotateY(回転角度) : Y軸を軸とする角度によって時計回りの回転を指定。

rotateZ(回転角度) : Z軸を軸とする角度によって時計回りの回転を指定。

rotate3d(数値, 数値, 数値, 回転角度) : rotate3d()関数では、 最初の3つの数値で[x,y,z]ベクトルの指定。最後に角度によって時計回りの回転を指定。

回転角度の値はdegを入力。

例:

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

 

rotate()

角度によって2D回転を指定します。

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

 

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

デモページ

rotateX()

rotateX()はX軸を軸とする角度によって時計回りの回転を指定します。

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

 

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

デモページ

rotateY()

rotateY()はY軸を軸とする角度によって時計回りの回転を指定します。

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

 

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

デモページ

rotateZ()

rotateZ()はZ軸を軸とする角度によって時計回りの回転を指定。

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

 

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

デモページ

rotate3d(数値, 数値, 数値, 回転角度)

rotate3d()関数では、 最初の3つの数値で[x,y,z]ベクトルの指定。最後に角度によって時計回りの回転を指定。

[code]-moz-transform: rotate3d(30,10,20,160deg);
-webkit-transform: rotate3d(30,10,20,160deg);[/code]

 

 

[code]-moz-transform: rotate3d(30,10,20,-160deg);
-webkit-transform: rotate3d(30,10,20,-160deg);[/code]

 

デモページ

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

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

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