1.1 プロパティ transform
CSSトランスフォームを使うと、ドキュメントのフローを変えずに要素の位置、サイズ、回転、傾きを変えることができるよ。インタラクティブでダイナミックなウェブインターフェースを作るための強力なツールだね。transform、translate、rotate、scale、skewを使ったトランスフォームの基本を見てみよう。
transformプロパティは、二次元と三次元のトランスフォームを要素に適用するためのものだよ。translate、rotate、scale、skewなどのさまざまなトランスフォーム関数を組み合わせて使えるんだ。
構文:
element {
transform: transformation-function;
}
ここで:
transformation-function: 要素に適用されるトランスフォーム関数
使用例:
CSS
.element {
transform: translate(50px, 100px);
}
1.2 トランスフォーム translate
translateトランスフォームは、要素をX軸と/またはY軸に沿って移動させるために使われるよ。
構文:
element {
transform: translate(x, y);
}
ここで:
x: X軸のシフト（負の値または正の値が可能）y: Y軸のシフト（負の値または正の値が可能）
例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トランスフォーム translate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 固定サイズと色の要素.box:hover: 要素にマウスを重ねるとtranslate(50px, 50px)トランスフォームが適用され、右と下に50ピクセル移動するよ
1.3 トランスフォーム rotate
rotateトランスフォームは、要素をその中心を基準に回転させるために使われるよ。
構文:
element {
transform: rotate(angle);
}
ここで:
angle: 回転角度（度数法、負の値または正の値が可能）
例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トランスフォーム rotate</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transition: transform 0.5s;
}
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 固定サイズと色の要素.box:hover: 要素にマウスを重ねるとrotate(45deg)トランスフォームが適用され、時計回りに45度回転するよ
1.4 トランスフォーム scale
scaleトランスフォームは、要素のサイズをX軸と/またはY軸に沿って変更するために使われるよ。
構文:
element {
transform: scale(sx, sy);
}
ここで:
sx: X軸のスケール（1より大きいと拡大、1より小さいと縮小）sy: Y軸のスケール（1より大きいと拡大、1より小さいと縮小）
例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トランスフォーム scale</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transition: transform 0.5s;
}
.box:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 固定サイズと色の要素-
.box:hover: 要素にマウスを重ねるとscale(1.5, 1.5)トランスフォームが適用され、両軸で1.5倍に拡大するよ
1.5 トランスフォーム skew
skewトランスフォームは、要素をX軸と/またはY軸に沿って傾けるために使われるよ。
構文:
element {
transform: skew(ax, ay);
}
ここで:
ax: X軸の傾斜角度（負の値または正の値が可能）ay: Y軸の傾斜角度（負の値または正の値が可能）
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トランスフォーム skew</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 固定サイズと色の要素。.box:hover: 要素にマウスを重ねるとskew(20deg, 10deg)トランスフォームが適用され、X軸で20度、Y軸で10度傾くよ。
1.6 複数のトランスフォームの結合
transformプロパティでは、複数のトランスフォーム関数を組み合わせて使用することで、複雑なエフェクトを得ることができるんだ。
例:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>結合されたトランスフォーム</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #3498db;
transition: transform 0.5s;
}
.box:hover {
transform: translate(50px, 50px) rotate(45deg) scale(1.5) skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
コードの説明:
.box: 固定サイズと色の要素.box:hover: 要素にマウスを重ねるとtranslate、rotate、scale、skewトランスフォームが同時に適用され、複雑なエフェクトが生まれるよ
GO TO FULL VERSION