CSS3 transform 要素を変形させる part2
今回は、CSS3の「transform」について書きます。
以前に、transformの「拡大・縮小(transform:scale)」と「移動(transform:translate)」を書きました。
今回は、「回転」,「傾斜」,「遠近効果」について書きます。
「回転」などを書く前に、「transform」を軽く説明します。
「transform」は、要素を拡大,回転,移動など色々変形させる事ができます。
はじめに「回転」から書いていきます。
「回転」は、名前の通り要素を回転させることができます。
やり方は、
-webkit-transform:rotate(25deg);
こんな感じです。(※「webkit」などのベンダープレフィックスは適宜つけてください。)
「-35deg」といったマイナスも指定できます。
実際のプログラムでやるとこんなかんじです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> div { width: 400px; height: 200px; background-color: red; -webkit-transform:rotate(25deg); } </style> </head> <body> <div id="maru"></div> </body> </html>
実行結果
※赤色は、「width: 400px;height: 200px;」の普通のやつです。青色が回転させたものです。比較のために上のプログラムとは、少し違います。
さらに、
/*1.X軸を軸として回転します*/ -webkit-transform:rotateX(-25deg); /*2.Y軸を軸として回転します*/ -webkit-transform:rotateY(150deg); /*3.Z軸を軸として回転します*/ -webkit-transform:rotateZ(-125deg);
こういう細かい指定もできます。
次に「傾斜( skew() )」について書いていきます。
「傾斜( skew() )」は要素を傾けることができます。
やり方は・・・
-webkit-transform:skew(45deg,20deg);
/*skew(X軸の傾斜角度, Y軸の傾斜角度); */
(※「webkit」などのベンダープレフィックスは適宜つけてください。)
第1引数はX軸の傾斜角度,、第2引数はY軸の傾斜角度となっています。
マイナスの値も大丈夫です。
さらに、
/*1.skewX(X軸の傾斜角度)*/ -webkit-transform:skewX(20deg); /*2.skewY(Y軸の傾斜角度)*/ -webkit-transform:skewY(20deg);
こういう細かい指定もできます。
実際のプログラムで使うと、こうなります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> #maru { width: 30px; height: 30px; background-color: red; -webkit-transform:skew(20deg,45deg); } #nya{ width: 30px; height: 30px; background-color: blue; -webkit-transform:skewX(20deg); } </style> </head> <body> <div id="maru"></div> <div id="nya"></div> </body> </html>
最後に、「遠近効果」について書きます。
遠近効果は、奥行きの深さを指定し、遠近効果を調整するものです。
こちらは、少しわかりにくいかも・・・
やり方は・・・
-webkit-transform: perspective(300)
/*perspective(数値); */
(※「webkit」などのベンダープレフィックスは適宜つけてください。)
実際のプログラムで使うとこんなかんじです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>css3</title> <style> #maru { position: absolute; left:100px; width: 200px; height: 200px; background-color: rgba(255,0,0,0.5); } #nya{ position: absolute; left:100px; width: 200px; height: 200px; background-color: rgba(0,255,0,0.5); -webkit-transform: perspective(300) rotateX(30deg); } </style> </head> <body> <div style="position: relative; height: 230px;"> <div id="maru"></div> <div id="nya"></div> </div> </body> </html>
緑にperspectiveを使っています。 赤は普通のものです。
遠近効果が出ているかな??
これで、transform の機能のすべてです。今のところ。
参考サイト
transform-CSS3リファレンス
CSS3の3D transform、三次元回転やperspectiveの実装状況は? - freefielder.jp