transform-originプロパティの説明
CSSのtransform-originプロパティは、要素を座標変換させる時の原点を指定します。座標変換の原点とは、その点を中心にして要素の変形が行われる座標のことです。例えば、transformプロパティにrotate()関数を指定し、要素を回転させようとした時、その原点は回転の中心になります。
原点の座標は、x軸、y軸、z軸のオフセット値で場所を定めます。最初の原点は(0, 0)にあります。そこから、どれだけ移動するのかを<length>値や<percentage>値で定めます。
transform-originは、オフセットを表す1つから3つの値を使用します。
- 1つの値が指定された場合は、水平方向のオフセットを表します。ただし、
topとbottomの場合は垂直方向を表します。この場合に使用できるのは、<length>、<percentage>、またはキーワードのleft、center、right、top、bottomのいずれかです。 - 2つの値が指定された場合は、1つ目の値を水平方向、2つ目の値を垂直方向として扱います。1つ目の値に使用できるのは、
<length>、<percentage>、またはキーワードのleft、center、rightのいずれかです。2つ目の値に使用できるのは、<length>、<percentage>、またはキーワードのtop、center、bottomのいずれかです。 - 3つ目の値はz軸のオフセットを表します。使用できるのは
<length>のみです。
transform-originに指定できる値
x-offset<length>や<percentage>によって、ボックスの左辺と座標変換の原点までの距離を示します。y-offset<length>や<percentage>によって、ボックスの上辺と座標変換の原点までの距離を示します。offset-keyword- キーワードの
left、right、top、bottom、centerによって、対応するオフセットを示します。 x-offset-keyword- キーワードの
left、right、centerによって、ボックスの水平方向のどこに寄せるのかを示します。 y-offset-keyword- キーワードの
top、bottom、centerによって、ボックスの垂直方向のどこに寄せるのかを示します。 z-offset- 画面の奥行きを示すz軸方向のオフセットを
<length>で示します。
キーワードに対応した割合の表
キーワードは、特定の<percentage>値を表すショートカットです。各キーワードを指定した場合は、次の表で示される割合を指定した場合と同じ効果になります。
| キーワード | パーセンテージ |
|---|---|
| left | 0% |
| center | 50% |
| right | 100% |
| top | 0% |
| bottom | 100% |
transform-originの使い方とサンプルコード
transform-originプロパティの構文は以下の通りです。
/* x-offset */
transform-origin: 10px;
transform-origin: left;
/* x-offset | y-offset */
transform-origin: 10px 20px;
/* x-offset-keyword | y-offset */
transform-origin: left 2px;
/* offset-keyword | y-offset-keyword */
transform-origin: 10px top;
/* x-offset-keyword | y-offset-keyword */
transform-origin: left center;
/* y-offset-keyword | x-offset-keyword */
transform-origin: bottom right;
/* x-offset | y-offset | z-offset */
transform-origin: 10px 20% 30px;
/* x-offset-keyword | y-offset | z-offset */
transform-origin: left 20px -5px;
/* x-offset-keyword | y-offset-keyword | z-offset */
transform-origin: right bottom 3rem;
/* y-offset-keyword | x-offset-keyword | z-offset */
transform-origin: bottom right 3rem;
/* グローバル値 */
transform-origin: inherit;
transform-origin: initial;
transform-origin: revert;
transform-origin: unset;
transform-originの実例
それでは実際にtransform-originプロパティの書き方を見ていきましょう。以下の例は、transformのrotate()関数を使って要素を回転させた時に、その原点の位置を変更した時の比較です。
最初のセクションは要素の中心を軸に回転していますが、以降のセクションでは各辺の角を軸に回転しています。もちろん、原点の位置はz軸とy軸の座標を変えることによって自由に動かすことができます。アニメーションと連携したりユーザーの操作をトリガーとすることで、面白い動きが作れるでしょう。
<div class="samp_box">
<section>
<h1>transform-origin: 50% 50% 0;（初期値）</h1>
<div class="rotate">
<span></span>
<span id="to_1"></span>
</div>
</section>
<section>
<h1>transform-origin: 0 0;</h1>
<div class="rotate">
<span></span>
<span id="to_2"></span>
</div>
</section>
<section>
<h1>transform-origin: 100% 0;</h1>
<div class="rotate">
<span></span>
<span id="to_3"></span>
</div>
</section>
<section>
<h1>transform-origin: 0 100%;</h1>
<div class="rotate">
<span></span>
<span id="to_4"></span>
</div>
</section>
<section>
<h1>transform-origin: 100% 100%;</h1>
<div class="rotate">
<span></span>
<span id="to_5"></span>
</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
padding: 0;
font-size: 1rem;
}
section > div {
position: relative;
width: 200px;
height: 100px;
margin: 1rem 0 0;
border: 1px solid #ccc;
text-align: center;
}
section > div > span {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
border: 1px solid #333;
}
.rotate > span[id] {
transform: rotate(30deg);
background-color: #09f;
color: #fff;
opacity: 50%;
}
#to_1 {
transform-origin: 50% 50% 0;
}
#to_2 {
transform-origin: 0 0;
}
#to_3 {
transform-origin: 100% 0;
}
#to_4 {
transform-origin: 0 100%;
}
#to_5 {
transform-origin: 100% 100%;
}
アニメーションとの組み合わせ
続いてanimationプロパティとの連携を紹介します。以下の例は、transformのscale()関数を使って拡大するアニメーションを指定した要素に、別のステップアニメーションを追加して拡大する原点を変えていく内容です。
単純に拡大を繰り返すアニメーションであれば、ありきたりの表現になりかねない内容ですが、拡大が始まる原点の位置を変えていくことで、目を引く効果を実現しています。これはあくまで参考に過ぎませんが、このようにtransform-originの機能を応用することで、表現の幅が広がることを覚えておきましょう。
<div class="samp_box">
<section>
<h1>animation with transform + transform-origin</h1>
<div>
<span class="anime"></span>
</div>
</section>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
}
.samp_box > section {
overflow: auto;
margin: 1rem 0 0;
padding: 0 1rem 1rem;
background-color: #fff;
}
section > h1 {
margin: 1rem 0 0;
padding: 0;
font-size: 1rem;
}
section > div {
position: relative;
width: 200px;
height: 200px;
margin: 1rem 0 0;
border: 1px solid #000;
text-align: center;
}
section > div > span {
display: block;
width: 100%;
height: 100%;
background-color: #09f;
}
.anime {
animation: anime_1 1s infinite, anime_2 4s steps(4, jump-none) infinite;
}
@keyframes anime_1 {
0% { transform: scale(0);}
100% { transform: scale(1);}
}
@keyframes anime_2 {
0% { transform-origin: 0 0;}
24% { transform-origin: 0 0;}
25% { transform-origin: 100% 0;}
49% { transform-origin: 100% 0;}
50% { transform-origin: 0 100%;}
74% { transform-origin: 0 100%;}
75% { transform-origin: 100% 100%;}
100% { transform-origin: 100% 100%;}
}