2.1 プロパティ transform-origin
CSSのtransform-originプロパティは、rotate、scale、skew、translateのようなトランスフォームが適用される基準点を定義するんだ。デフォルトではこの点は要素の中心だけど、視覚効果を調整するためにその位置を変えることができるよ。
transform-originの基本
transform-originプロパティのシンタックス:
element {
transform-origin: x-axis y-axis z-axis;
}
ここで:
x-axis: 水平方向の位置を定義y-axis: 垂直方向の位置を定義z-axis: Z軸の位置を定義（3Dトランスフォーム用）
可能な値:
- キーワード:
top,right,bottom,left,center - パーセンテージ値: 要素サイズに対するパーセンテージで原点を指定
- 絶対値: ピクセルやその他の単位で原点を指定
例:
transform-origin: 50% 50%;— 要素の中心（デフォルト値）transform-origin: 0 0;— 要素の左上隅transform-origin: 100% 100%;— 要素の右下隅transform-origin: 50px 100px;— 左上隅から50ピクセル右、100ピクセル下にオフセット
原点のセンタリング（デフォルト）
この例では、rotateトランスフォームが要素の中心を基準に行われるよ。
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;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.2 点のオフセット
原点を左上隅にオフセット
この例では、トランスフォーメーションの原点が要素の左上隅にオフセットされるよ。
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: #e74c3c;
transform: rotate(45deg);
transform-origin: top left;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
原点を右下隅にオフセット
この例では、トランスフォーメーションの原点が要素の右下隅にオフセットされるよ。
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: #2ecc71;
transform: rotate(45deg);
transform-origin: bottom right;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.3 値の設定
パーセンテージ値の使用
この例では、トランスフォーメーションの原点が水平に25%、垂直に75%の位置にあるよ。
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: #9b59b6;
transform: rotate(45deg);
transform-origin: 25% 75%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
絶対値の使用
この例では、トランスフォーメーションの原点が水平に50ピクセル、垂直に20ピクセルずれているよ。
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: #f1c40f;
transform: rotate(45deg);
transform-origin: 50px 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2.4 実際の応用
特定の点を中心に要素を回転
transform-originを使うと、特定の点を中心に回転する要素を作るのに便利だよ。例えば、時計の針を作るときとかね。
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>
.clock {
position: relative;
width: 200px;
height: 200px;
border: 5px solid #333;
border-radius: 50%;
margin: 50px auto;
}
.hand {
position: absolute;
bottom: 50%;
left: 50%;
width: 5px;
height: 50%;
background-color: #333;
transform-origin: bottom center;
}
.hour-hand {
transform: rotate(30deg); /* 1時の位置例 */
}
</style>
</head>
<body>
<div class="clock">
<div class="hand hour-hand"></div>
</div>
</body>
</html>
スケーラブルな要素の作成
原点を変えることで、さまざまな点を基準に要素をスケーリングすることができるよ。動的なインターフェイスを作るのに便利だね。
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: #1abc9c;
transition: transform 0.5s;
transform-origin: top left;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
GO TO FULL VERSION