プログラミング勉強日記
2020年11月9日
画像を回転させたいときは画像自体を編集していたが、transformプロパティを使うことで回転できることを知ったのでまとめる。
transformプロパティとは
トランスフォーム関数(変形関数)と呼ばれる特別な値を指定することで対象要素を3次元で変形させることができる。
transformプロパティの値にrotateというトランスフォーム関数を使って角度を指定すれば指定した角度で文字や画像などHTMLの要素を丸ごと回転できる。また、2Dの平面空間だけでなくX軸・Y軸・Z軸を基準にした3D空間での回転もできる。
2Dと3Dで回転させる場合の記述方法
/* 2D(平面)で回転 */
transform: rotate( 角度 );
/* 3DのX軸(水平)で回転 */
transform: rotateX( 角度 );
/* 3DのY軸(垂直)で回転 */
transform: rotateY( 角度 );
/* 3DのZ軸(奥行)で回転 */
transform: rotateZ( 角度 );
CSSで角度を表す単位はdegで、90degであれば90度を示す。(マイナスの値を使うこともできる)
トランスフォーム関数
| 関数名 | 説明 |
|---|---|
| none | 要素を変形しない |
| matrix3d() | 行列式によって要素を変形する。16個の任意の数値をカンマで区切って指定する |
| translate3d() | 要素のxyz座標を移動する。移動距離を単位付きの数値でカンマで区切って指定する。 |
| translateZ() | 要素のz座標を移動する。移動距離を単位付きの数値で指定する。 |
| scale()3d | 要素をx軸、y軸、z軸方向に拡大・縮小する。値はカンマ（,）で区切って指定する。 |
| scaleZ() | 要素をz軸方向に拡大・縮小する。任意の実数で倍率を指定する。 |
| rotate3d() | 要素を回転する。値はカンマで区切って指定する。 |
| rotateX() | 要素をx軸を中心に回転する。回転角度を単位付きの数値で指定する。 |
| rotateY() | 要素をy軸を中心に回転する。回転角度を単位付きの数値で指定する。 |
| rotateZ() | 要素をz軸を中心に、xy平面上を回転する。回転角度を単位付きの数値で指定する。 |
| perspective() | 画面からの視点の距離を指定して、z 軸方向に変形した要素の奥行きを表す。 |
2D回転させる方法
2D(平面)回転において、-30degを指定して反時計回りに30度回転させてみる。
CSS
.sagrada {
transform: rotate( -30deg );
}
HTML
<p class="sagrada">
<img src="SagradaFamília.jpg" alt="サグラダファミリア">
サグラダファミリア
</p>
実行結果
X軸で3D回転させる方法
X軸(水平方向の軸)を基準にして180度回転させてみる。
CSS
.sagrada {
transform: rotateX( 180deg );
}
HTML
<p class="sagrada">
<img src="SagradaFamília.jpg" alt="サグラダファミリア">
サグラダファミリア
</p>
実行結果
Y軸で3D回転させる方法
Y軸(垂直方向の軸)を基準にして180度回転させてみる。(左右反転させてみる)
CSS
.sagrada {
transform: rotateY( 180deg );
}
HTML
<p class="sagrada">
<img src="SagradaFamília.jpg" alt="サグラダファミリア">
サグラダファミリア
</p>
実行結果
Z軸で3D回転させる方法
Z軸(奥行きの軸)を基準にして反時計回りに30度回転させてみる。
CSS
.sagrada {
transform: rotateZ( -30deg );
}
HTML
<p class="sagrada">
<img src="SagradaFamília.jpg" alt="サグラダファミリア">
サグラダファミリア
</p>
実行結果
これから、Z軸を基準に3D回転させたときは2Dで回転させた時と同じ結果が得られる。
参考文献
CSSのtransform:rotateで画像や文字を回転させる方法
transformプロパティの意味と使い方（3D空間での変形）