ボックスの変形transform

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)繰り返し

 この状態を平行投影法といいます。

rotateX()

.sample4 {
}
.sample4_child {
 transform: rotateX(0deg);
 transform: rotateX(180deg);
 transform: rotateX(360deg);
}


transform-style:preserve-3d;
perspective:100px;
rotateX(0deg)→rotateX(180deg)→rotateX(360deg)繰り返し

 この状態を透視投影法といいます。

rotateX()

.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)繰り返し

 この状態を平行投影法といいます。

rotateY()

.sample6 {
}
.sample6_child {
 transform: rotateY(0deg);
 transform: rotateY(180deg);
 transform: rotateY(360deg);
}


transform-style:preserve-3d;
perspective:100px;
rotateY(0deg)→rotateY(180deg)→rotateY(360deg)繰り返し

 この状態を透視投影法といいます。

rotateY()

.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)繰り返し

 この状態を平行投影法といいます。

rotateZ()

.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()については平行投影法、透視投影法見た目変わりません。

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()複合的に使用

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);
}





 Copyright IT SKILL MAP. All rights reserved.