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

transformプロパティ - (2015/06/30 (火) 20:31:05) の１つ前との変更点

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

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

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




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

このページでは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)
前後でこのような違いが生まれます。

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