「transformプロパティ」の編集履歴（バックアップ）一覧に戻る

transformプロパティ - (2015/06/30 (火) 20:14:43) のソース

このページではtransformプロパティの使い方について解説していきます。~
transformプロパティは様々な活用方法を持っているので少し解説が長くなってしまいますが、頑張って一緒にマスターしていきましょう。~
(※以下ではx軸は右を正とする水平方向軸、y軸は下を正とする垂直方向軸、裏から表へ向かってくる画面垂直方向をz軸の正とします。)~
目次
#contents
*2D(平面空間)におけるtransformの全体像
以下の全体像を少し頭の片隅においた状態で次の項目を読んでみてください。~
#image(width=500,transform全体像.png)
更にその上でもう一度この図を見ていただけると理解しやすいと思います。
*2D(平面空間)におけるtransform関数
transformプロパティは関数のようにいくつかの値を指定して、対象となる要素を変形させていきます。~
**skew()関数
この関数は指定要素をxy方向に傾斜をかけます。~
例えば、
 transform: translate(50px,50px)
と記述すれば、右方向に50px、下方向に50px、要素を移動させます。




*3D(立体空間)におけるtransform