【CSS】transformプロパティの基本の変形操作方法

タグ :

CSS

要素に2Dまたは3D変形を適用するために使用されます。このプロパティを使用すると、要素を移動、回転、スケーリング、傾斜させることができます。

transformプロパティにはいくつかの関数があり、それぞれ異なる変形を適用します。

1 2D変形関数
2 3D変形関数
3 複数の変形を一度に適用する
4 実際の使用例

2D変形関数

translate(x, y)

要素をX軸およびY軸に沿って移動させます。
例：transform: translate(50px, 100px);

rotate(angle)

要素を指定された角度（度数）だけ回転させます。
例：transform: rotate(45deg);

scale(x, y)

要素をX軸およびY軸に沿って拡大または縮小させます。
例：transform: scale(2, 0.5);

skew(x-angle, y-angle)

要素をX軸およびY軸に沿って傾斜させます。
例：transform: skew(30deg, 20deg);

matrix(a, b, c, d, e, f)

2D変形を行うための行列変換を指定します。これは他の変形を組み合わせたものであり、通常は直接使用することは少ないです。
例：transform: matrix(1, 0.5, -0.5, 1, 0, 0);

3D変形関数

translate3d(x, y, z)

要素をX軸、Y軸、およびZ軸に沿って移動させます。
例：transform: translate3d(50px, 100px, 200px);

rotateX(angle), rotateY(angle), rotateZ(angle)

要素をそれぞれX軸、Y軸、Z軸に沿って回転させます。
例：transform: rotateX(45deg);

scale3d(x, y, z)

要素をX軸、Y軸、およびZ軸に沿って拡大または縮小させます。
例：transform: scale3d(2, 0.5, 1);

perspective(n)

3D変形の際に遠近法の効果を設定します。
例：transform: perspective(500px);

複数の変形を一度に適用する

複数の関数をスペースで区切って指定する事で、複数の変形を一度に適用できます。
例：transform: translate(50px, 100px) rotate(45deg) scale(1.5);

実際の使用例



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>