このページではtransformプロパティの使い方について解説していきます。
transformプロパティは様々な活用方法を持っているので少し解説が長くなってしまいますが、頑張って一緒にマスターしていきましょう。
(※以下ではx軸は右を正とする水平方向軸、y軸は下を正とする垂直方向軸、裏から表へ向かってくる画面垂直方向をz軸の正とします。)
目次
以下の全体像を少し頭の片隅においた状態で次の項目を読んでみてください。
更にその上でもう一度この図を見ていただけると理解しやすいと思います。
transformプロパティは関数のようにいくつかの値を指定して、対象となる要素を変形させていきます。
marginなどのプロパティと何が違うのかと思うかもしれませんが、これはjQueryを使用する時に役立ちます。
この関数は指定要素を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の一行を書いていない場合と比べると
前後でこのような違いが生まれます。
x軸方向に向かって20度、y軸方向に向かって5度傾いた状態となります。
「向かって」という点に注意してください。
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);
}
このように、正方形の中心を軸に20度回転します。
3D(立体空間)においては2Dに加えて画面裏側から表側に向かってくる方向を正とするz軸が加わります。
それぞれの関数も
translate3d() translateZ() scale3d() scaleZ() rotate3d() rotateZ()
が加わります。
これらの関数が何を意味するかは、もはや自明ですね。
それぞれ注意するべき点があるとしたら、
x軸の時はyz平面において、y軸の時はxz平面において、z軸の時はyz平面における変化になる
という事だけでしょう。
3Dならではのプロパティもいくつか存在するので見てみましょう。
例えば、rotateX(45deg)でx軸を中心に要素を回転させた場合、どのようにボックスは表示されるでしょうか？
このように少し潰れた形で表示されます。
これではいまいち、回転しているようには見えませんね。
ここでperspectiveプロパティの登場です。
perspectiveプロパティは視点の距離を指定できるのでz軸方向に変形した要素に奥行きを与える事ができます。
それではrotate関数の時に使ったCSSコードの最後の一行を次のように書き換えてみてください。
trasform: perspective(200px) rotateX(45deg);
次のようになります。
このようにz軸に倒れているのがよくわかるようになります。
これはそんなに頻繁には使わないはずですが、一応このプロパティを使用する事で視点の位置をより細かく指定する事ができます。
center(初期値)、bottom、top、right、leftの他に、左上端を起点にしてxとyの座標を半角スペースで区切って指定する事が可能です。
また％表示と数値＋単位表示が可能です。
似たようなのがこのプロパティです。
このプロパティはperspective-originと同様の方法で変化させる要素の中心を変更する事ができます。
親要素を立体的に変形させた時に子要素と別々にするのか、あるいは、親要素と同一平面上に配置するのかを選択できます。
値は
flat; 子要素は親要素と同一平面上に配置される。(初期値) preserve-3d 子要素を個別に指定した変形が適用される
また、このプロパティは親要素に対して指定します。
3d空間で変形した要素の背面を指定できます。
値
visible; 背面もみえ、180度回転させると反対側がそのまま描かれる hidden; 背面は描かれず、要素が存在しないようにみえる
