「transformプロパティ」の編集履歴（バックアップ）一覧はこちら

transformプロパティ - (2015/07/01 (水) 21:18:14) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

このページではtransformプロパティの使い方について解説していきます。~
transformプロパティは様々な活用方法を持っているので少し解説が長くなってしまいますが、頑張って一緒にマスターしていきましょう。~
(※以下ではx軸は右を正とする水平方向軸、y軸は下を正とする垂直方向軸、裏から表へ向かってくる画面垂直方向をz軸の正とします。)~
目次
#contents
*2D(平面空間)におけるtransformの全体像
以下の全体像を少し頭の片隅においた状態で次の項目を読んでみてください。~
#image(width=500,transform全体像.png)
更にその上でもう一度この図を見ていただけると理解しやすいと思います。
*2D(平面空間)におけるtransform関数
transformプロパティは関数のようにいくつかの値を指定して、対象となる要素を変形させていきます。~
**skew()関数
この関数は指定要素をxy方向に傾斜をかけます。~
例えば、~
HTML
 <div id="skew_sample">
   <p>skewの解説</p>
 </div>
CSS
 #skew_sample {
   height: 200px;
   width: 200px;
   border: 2px solid #333;
   margin: 80px;
   background-color: #ff0000;
   transform: skew(20deg,5deg);
 }
と記述するし、skewの一行を書いていない場合と比べると
#image(width=300,skew_sample.png)
前後でこのような違いが生まれます。~
x軸方向に向かって20度、y軸方向に向かって5度傾いた状態となります。~
「向かって」という点に注意してください。
**rotate()関数
rotate関数を使って前後の変化を見てみましょう。~
HTML
 <div id="rotate_sample">
   <p>rotateの解説</p>
 </div>
CSS
 #rotate_sample {
   height: 200px;
   width: 200px;
   border: 2px solid #333;
   margin: 80px;
   background-color: #ff0000;
   transform: rotate(20deg);
 }
#image(width=300,rotate_sample.png)
このように、正方形の中心を軸に20度回転します。
*3D(立体空間)におけるtransform
3D(立体空間)においては2Dに加えて画面裏側から表側に向かってくる方向を正とするz軸が加わります。~
それぞれの関数も
 translate3d()
 translateZ()
 scale3d()
 scaleZ()
 rotate3d()
 rotateZ()
が加わります。
これらの関数が何を意味するかは、もはや自明ですね。~
それぞれ注意するべき点があるとしたら、&color(red){x軸の時はyz平面において、y軸の時はxz平面において、z軸の時はyz平面における変化になる}という事だけでしょう。~
3Dならではのプロパティもいくつか存在するので見てみましょう。
*perspectiveプロパティ
例えば、rotateX(45deg)でx軸を中心に要素を回転させた場合、どのようにボックスは表示されるでしょうか？~
このように少し潰れた形で表示されます。

このページではtransformプロパティの使い方について解説していきます。~
transformプロパティは様々な活用方法を持っているので少し解説が長くなってしまいますが、頑張って一緒にマスターしていきましょう。~
(※以下ではx軸は右を正とする水平方向軸、y軸は下を正とする垂直方向軸、裏から表へ向かってくる画面垂直方向をz軸の正とします。)~
目次
#contents
*2D(平面空間)におけるtransformの全体像
以下の全体像を少し頭の片隅においた状態で次の項目を読んでみてください。~
#image(width=500,transform全体像.png)
更にその上でもう一度この図を見ていただけると理解しやすいと思います。
*2D(平面空間)におけるtransform関数
transformプロパティは関数のようにいくつかの値を指定して、対象となる要素を変形させていきます。~
**skew()関数
この関数は指定要素をxy方向に傾斜をかけます。~
例えば、~
HTML
 <div id="skew_sample">
   <p>skewの解説</p>
 </div>
CSS
 #skew_sample {
   height: 200px;
   width: 200px;
   border: 2px solid #333;
   margin: 80px;
   background-color: #ff0000;
   transform: skew(20deg,5deg);
 }
と記述するし、skewの一行を書いていない場合と比べると
#image(width=300,skew_sample.png)
前後でこのような違いが生まれます。~
x軸方向に向かって20度、y軸方向に向かって5度傾いた状態となります。~
「向かって」という点に注意してください。
**rotate()関数
rotate関数を使って前後の変化を見てみましょう。~
HTML
 <div id="rotate_sample">
   <p>rotateの解説</p>
 </div>
CSS
 #rotate_sample {
   height: 200px;
   width: 200px;
   border: 2px solid #333;
   margin: 80px;
   background-color: #ff0000;
   transform: rotate(20deg);
 }
#image(width=300,rotate_sample.png)
このように、正方形の中心を軸に20度回転します。
*3D(立体空間)におけるtransform
3D(立体空間)においては2Dに加えて画面裏側から表側に向かってくる方向を正とするz軸が加わります。~
それぞれの関数も
 translate3d()
 translateZ()
 scale3d()
 scaleZ()
 rotate3d()
 rotateZ()
が加わります。
これらの関数が何を意味するかは、もはや自明ですね。~
それぞれ注意するべき点があるとしたら、&color(red){x軸の時はyz平面において、y軸の時はxz平面において、z軸の時はyz平面における変化になる}という事だけでしょう。~
3Dならではのプロパティもいくつか存在するので見てみましょう。
**perspectiveプロパティ
例えば、rotateX(45deg)でx軸を中心に要素を回転させた場合、どのようにボックスは表示されるでしょうか？~
このように少し潰れた形で表示されます。
#image(width=300,perspective.png)
これではいまいち、回転しているようには見えませんね。~
ここでperspectiveプロパティの登場です。~
&color(red){perspectiveプロパティは視点の距離を指定できるのでz軸方向に変形した要素に奥行きを与える事ができます。}~
それではrotate関数の時に使ったCSSコードの最後の一行を次のように書き換えてみてください。
 perspective: 200px;
 trasform: rotateX(45deg);
次のようになります。