要素に対して移動、回転、伸縮、傾斜の変形を加えることができる。2次元的な動きだけでなく、3次元的動きも可能にしていることが特徴。
【参考】https://creive.me/archives/16145/
セレクタ名 {
transform: translateX(20px) translateY(20px) rotate(40deg);
}- transrate()：要素のxy座標を移動する
- scale()：要素をx軸、y軸方向に拡大・縮小する
- rotate()：要素を回転する
- skew()：要素の形状をx軸、y軸方向に傾斜させる
独立プロパティ化
transformプロパティのtranslateやrotateは独立プロパティになったので、以下のように指定できる。
.element {
translate: 10px;
scale: 1.5;
rotate: 45deg;
}複数の変形を行っている場合の記述も簡潔になる。
/* Good */
.icon {
translate: 10px;
rotate: 45deg;
}
a:hover .icon {
rotate: 90deg;
}
/* Bad */
.icon {
transform: translate(10px) rotate(45deg);
}
a:hover .icon {
transform: translate(10px) rotate(90deg);
}