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

transformプロパティ - (2015/06/29 (月) 15:51:51) の編集履歴(バックアップ)


このページではtransformプロパティの使い方について解説していきます。
transformプロパティは様々な活用方法を持っているので少し解説が長くなってしまいますが、頑張って一緒にマスターしていきましょう。
目次

2D(平面空間)におけるtransformの全体像

以下の全体像を少し頭の片隅においた状態で次の項目を読んでみてください。

更にその上でもう一度この図を見ていただけると理解しやすいと思います。

2D(平面空間)におけるtransform関数

transformプロパティは関数のようにいくつかの値を指定して、対象となる要素を変形させていきます。
(※以下ではx軸は右を正とする水平方向軸、y軸は下を正とする垂直方向軸とします。)

transrate()関数

この関数は指定要素をxy方向に移動させます。

transform: transrate(50px,50px)

と記述すれば、右方向に50px、下方向に50px、要素を移動させます。

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