概要
CSSプロパティ｢transform｣は、要素の座標空間を変更することができます。指定した値が適用されると要素は移動、回転、伸縮、傾斜などの効果が付与されます。また変形には2D（X,Y方向）と3D（X,Y,Z方向）の２種類あります。それぞれ書き方がやや異なりますので、以降解説していきます。
<div class="box"></div>
<div class="box transform"></div>
<style>
div {
margin-bottom: 10px;
}
p {
font-size: 12px;
}
.box {
width: 50px;
height: 50px;
background-color: #def;
}
.transform {
transform: translate(100px, 10px)
}
</style>取りうる値
{ transform: transform関数(x値,y値) }
{ transform: transform関数X(値) transform関数Y(値) transform関数Z(値) }
{ transform: transform関数3d(x値,y値, z値) }
このプロパティの値に、transform関数を指定することで、様々な効果を適用させることができます。そのなかで移動、回転、伸縮は、3D（XYZ方向）による指定ができます。基本的な記述方法は上記のようなパターンで、変化をつけたい座標位置によって使い分けるとよいでしょう。またZ方向は指定できる関数が限られていますので下記の相関表を確認してみてください。
| 関数 | 説明 | 2D(X, Y)効果 | 3D(X, Y, Z)効果 |
|---|---|---|---|
| translate | 指定した値に対して移動する | ○ | ○ |
| rotate | 指定した値に対して回転する | ○ | ○ |
| scale | 指定した値に対して伸縮する | ○ | ○ |
| skew | 指定した値に対して傾斜する | ○ | × |
transformプロパティの値と関数の関係
ではそれぞれの関数ががどのような変化をもたらすのかを確認していきましょう。縦横50pxのボックスに効果を指定していきます。
translate関数の指定
transformにtranslate関数を指定した例です。このプロパティは指定した座標に移動効果を与えます。
<p>指定なし</p>
<div class="box"></div>
<p>x座標を変化させます</p>
<div class="box translate-x"></div>
<p>y座標を変化させます</p>
<div class="box translate-y"></div>
<p>z方向に変化させます</p>
<div class="box translate-z"></div>
<p>3d変化させます</p>
<div class="box translate-３d"></div>
<style>
div {
margin-bottom: 10px;
}
p {
font-size: 12px;
}
.box {
width: 50px;
height: 50px;
background-color: #def;
}
.translate-x {
transform: translateX(20px);
}
.translate-y {
transform: translateY(20px);
}
.translate-z {
transform: translateZ(20px);
}
.translate-3d {
transform: translate3d(20px, 20px, 20px);
}
</style>rotate関数の指定
transformにrotate関数を指定した例です。このプロパティは指定した座標に回転効果を与えます。
<p>指定なし</p>
<div class="box">box</div>
<p>x座標を変化させます</p>
<div class="box rotate-x">box</div>
<p>y座標を変化させます</p>
<div class="box rotate-y">box</div>
<p>z方向に変化させます</p>
<div class="box rotate-z">box</div>
<p>3d変化させます</p>
<div class="box rotate-３d">box</div>
<style>
div {
margin-bottom: 10px;
}
p {
font-size: 12px;
}
.box {
width: 50px;
height: 50px;
background-color: #def;
}
.rotate-x {
transform: rotateX(-45deg);
}
.rotate-y {
transform: rotateY(120deg);
}
.rotate-z {
transform: rotateZ(20deg);
}
.rotate-３d {
transform: rotate3d(1,0,0,180deg);
}
</style>補足ですが3d指定の記法だけやや異なります。最初の3つの数値で[x,y,z]の方向を指定してから、回転角度を指定します。
transform: rotate3d(x座標, y座標, z座標, 回転角度);scale関数の指定
transformにscale関数を指定した例です。このプロパティは指定した要素を拡大、縮小効果を与えます。
<p>指定なし</p>
<div class="box">box</div>
<p>x方向の縮尺比率を指定</p>
<div class="box scale-x">box</div>
<p>y方向の縮尺比率を指定</p>
<div class="box scale-y">box</div>
<p>z方向の縮尺比率を指定</p>
<div class="box scale-z">box</div>
<p>3d変化させます</p>
<div class="box scale-３d">box</div>
<style>
div {
margin-bottom: 10px;
}
p {
font-size: 12px;
}
.box {
width: 50px;
height: 50px;
background-color: #def;
}
.scale-x {
transform: scaleX(1.5);
}
.scale-y {
transform: scaleY(1.5);
}
.scale-z {
transform: scaleZ(1.5);
}
.scale-３d {
transform: scale3d(1.5, 1.5, 1.5);
}
</style>skew関数の指定
transformにskew関数を指定した例です。このプロパティは指定した要素に傾斜効果を与えます。この関数はz方向への指定がありませんので注意しましょう。
<p>指定なし</p>
<div class="box">box</div>
<p>x方向の傾斜角度を指定</p>
<div class="box skew-x">box</div>
<p>y方向の傾斜角度を指定</p>
<div class="box skew-y">box</div>
<p>x, y方向の傾斜角度を指定</p>
<div class="box skew-xy">box</div>
<style>
div {
margin-bottom: 10px;
}
p {
font-size: 12px;
}
.box {
width: 50px;
height: 50px;
background-color: #def;
}
.skew-x {
transform: skewX(20deg);
}
.skew-y {
transform: skewY(20deg);
}
.skew-xy {
transform: skew(20deg, 20deg);
}
</style>この関数は初期の草案に存在しましたが、現在この関数は取り除かれたようです。ただし一部ブラウザの実装に残されているので表示できるますが、これは使用しないほうがよいでしょう。
使用例
要素の変化をつけるこのプロパティは、 transition プロパティなどと組み合わせて使うことがあります。ボタンをクリックしたタイミングで、あらかじめ用意していたtranformプロパティのclassを付与してみます。
<div id="box" class="box">box</div>
<button onClick="sample()">押してください</button>
<script>
function sample() {
document.getElementById('box').classList.add('transform');
}
</script>
<style>
div {
margin-bottom: 10px;
}
.box {
width: 50px;
height: 50px;
background-color: #def;
}
.transform {
transition: 3s;
transform: rotate3d(1, 0, 0, 720deg);
}
</style>