2Dの変形
ボックスの2Dの変形を指定します。
transform
transform関数 | 変形 | 説明 |
translate(横方向、縦方向) | 移動 | 横方向、縦方向の移動距離をpx、%、em等により設定する |
scale(横倍率、縦倍率) | 拡大縮小 | 横、縦の拡大縮小倍率を1を基準に数値で設定する ex.1.5=1.5倍 |
rotate(角度) | 回転 | 回転する角度をdegで指定する。ex.90度=90deg(※時計回り。反時計回りの場合は-270degで指定) |
skew(横方向、縦方向) | 傾斜 | 横方向、縦方向の傾斜をpx、%、em、deg等により設定する |
transformプロパティ利用例
結果
HTML
CSS
-
transform:translate(50px,0) scale(1.5,1) rotate(5deg);を指定。
-
/* HTMLの例 */
transform:translate(50px,0) scale(1.5,1) rotate(5deg);を指定。 -
/* CSSの例 */ .sample1 { width:400px; height:50px; background:skyblue; transform:translate(50px,0) scale(1.5,1) rotate(5deg); }
傾斜skewを指定
結果
HTML
CSS
-
transform:skew(10deg,0);を指定。
-
/* HTMLの例 */
transform:skew(10deg,0);を指定。 -
/* CSSの例 */ .sample2 { width:400px; height:50px; background:skyblue; transform:skew(10deg,0); }
3Dの変形
transform-style
3Dを表現する場合はまず、親要素に対してtransform-styleを指定します。
transform-style値 | 説明 |
flat(初期値) | 平行投影法 |
preserve-3d | 透視投影法 |
perspective
preserve-3dを指定した場合は遠近感表すperspectiveプロパティをこれも親要素に対して指定します。ここで指定する値は子要素をどれ位の奥行に配置するかです。
perspective値 | 説明 |
奥行 | px、emで設定する |
transform-style及びperspectiveプロパティを利用して3D表示する例
CSS
.sample3 {
transform-style:preserve-3d;
perspective:1000px;
}
これだけでは3Dに見えません。以下3Dの変形プロパティtransformを子要素に指定して初めて3D表示となります。
transform
3Dの変形でも2Dと同じくtransformプロパティを利用しますが、関数が3D対応のものになります。
transform関数 | 変形 | 説明 |
translate3d(横方向(X軸)、縦方向(Y軸)、高さ方向(Z軸)) | 移動 | 横方向、縦方向、高さ方向の移動距離をpx、%、em等により設定する |
scale3d(横倍率、縦倍率、高さ倍率) | 拡大縮小 | 横、縦、高さの拡大縮小倍率を1を基準に数値で設定する ex.1.5=1.5倍 |
rotateX(角度) | 回転 | X軸の回転する角度をdegで指定する。ex.90度=90deg |
rotateY(角度) | 回転 | Y軸の回転する角度をdegで指定する。ex.90度=90deg |
rotateZ(角度) | 回転 | Z軸の回転する角度をdegで指定する。ex.90度=90deg |
2Dでは利用できたskew(傾斜)ですが、3Dでは利用できません。
transform-style、perspective、transformを利用して3D表示する例
※分かりにくいのでアニメーションを利用しています。アニメーションの説明はこちらでまとめています。
transform-style:指定しない(=flat初期値)
perspective:指定しない
rotateX(0deg)→rotateX(180deg)→rotateX(360deg)繰り返し
この状態を平行投影法といいます。
.sample4 {
}
.sample4_child {
transform: rotateX(0deg);
transform: rotateX(180deg);
transform: rotateX(360deg);
}
transform-style:preserve-3d;
perspective:100px;
rotateX(0deg)→rotateX(180deg)→rotateX(360deg)繰り返し
この状態を透視投影法といいます。
.sample5 {
transform-style:preserve-3d;
perspective:300px;
}
.sample5_child {
transform: rotateX(0deg);
transform: rotateX(180deg);
transform: rotateX(360deg);
}
transform-style:指定しない(=flat初期値)
perspective:指定しない
rotateY(0deg)→rotateY(180deg)→rotateY(360deg)繰り返し
この状態を平行投影法といいます。
.sample6 {
}
.sample6_child {
transform: rotateY(0deg);
transform: rotateY(180deg);
transform: rotateY(360deg);
}
transform-style:preserve-3d;
perspective:100px;
rotateY(0deg)→rotateY(180deg)→rotateY(360deg)繰り返し
この状態を透視投影法といいます。
.sample7 {
transform-style:preserve-3d;
perspective:300px;
}
.sample7_child {
transform: rotateY(0deg);
transform: rotateY(180deg);
transform: rotateY(360deg);
}
transform-style:指定しない(=flat初期値)
perspective:指定しない
rotateZ(0deg)→rotateZ(180deg)→rotateZ(360deg)繰り返し
この状態を平行投影法といいます。
.sample8 {
}
.sample8_child {
transform: rotateZ(0deg);
transform: rotateZ(180deg);
transform: rotateZ(360deg);
}
transform-style:preserve-3d;
perspective:300px;
rotateZ(0deg)→rotateZ(180deg)→rotateZ(360deg)繰り返し
この状態を透視投影法といいます。rotateZ()については平行投影法、透視投影法見た目変わりません。
.sample9 {
transform-style:preserve-3d;
perspective:300px;
}
.sample9_child {
transform: rotateZ(0deg);
transform: rotateZ(180deg);
transform: rotateZ(360deg);
}
transform-style:preserve-3d;
perspective:100px;
translate3d()、scale3d()、rotateY()複合的に使用
.sample10 {
transform-style:preserve-3d;
perspective:300px;
}
.sample10_child {
transform: translate3d(0,0,0) scale3d(1,1,1) rotateY(0deg);
transform: translate3d(10px,10px,10px) scale3d(2,1,1) rotateY(180deg);
transform: translate3d(30px,0,0) scale3d(1,2,1) rotateY(360deg);
}