transformプロパティの説明
CSSのtransformプロパティは、要素に座標変換を適用して移動、回転、拡大縮小、歪みなどを行います。座標変換関数の<transform-function>を使用することによって、x軸、y軸、さらにはz軸の方向に変化を与えることができます。
この機能は、座標変換可能な要素に対してのみ有効です。CSSのボックス・モデルによってレイアウトを管理される置換要素ではないインラインボックス、表の行または列グループには適用できません。
transformを効果的に活用するには、animationプロパティやperspectiveプロパティとの連携が考えられます。これらの機能を組み合わせることで、移動や変形をダイナミックな表現にすることができます。
また、変形の基準となる原点の位置はtransform-originで変更できます。
transformに指定できる値
none- 座標変換を一切行いません。これが初期値です。
<transform-function>- 1つ以上の座標変換関数を使って要素の変化具合を表現します。関数には移動や回転、拡大縮小、歪み、視点の距離などを定義する専用のものがあります。
transformの使い方とサンプルコード
transformプロパティの構文は以下の通りです。
/* キーワード値 */
transform: none;
/* 移動関数 */
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
/* 回転関数 */
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
/* 拡大縮小関数 */
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
/* 視点距離関数 */
transform: perspective(17px);
/* 行列変換関数 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
/* 歪み関数 */
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
/* 複数の関数値 */
transform: translateY(50px) rotateX(-90deg);
transform: translate(10px, 20px) rotateY(45deg) perspective(500px);
/* グローバル値 */
transform: inherit;
transform: initial;
transform: revert;
transform: unset;
transformの実例
それでは実際にtransformプロパティの書き方を見ていきましょう。最初の例は、関数の書き方と効果を確認するための単純な内容です。複数のボックスを用意し、その中のひとつにtransformを適用しています。
それぞれの関数がどのような働きをしているのか、ブラウザに実装されている開発者向けの機能を使って、リアルタイムに数値を変更してみましょう。
<div class="samp_box">
<section>
<h1>transform: translate(120%, 1.5rem);</h1>
<div>Item</div>
<div id="tf_1">Item</div>
<div>Item</div>
</section>
<section>
<h1>transform: rotate(45deg);</h1>
<div>Item</div>
<div id="tf_2">Item</div>
<div>Item</div>
</section>
<section>
<h1>transform: scale(0.7, 2);</h1>
<div>Item</div>
<div id="tf_3">Item</div>
<div>Item</div>
</section>
<section>
<h1>transform: skew(30deg, 20deg);</h1>
<div>Item</div>
<div id="tf_4">Item</div>
<div>Item</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 {
width: 80px;
margin: .3rem 0 0;
padding: .3rem;
border: 1px solid #000;
text-align: center;
}
section > div[id] {
background-color: #09f;
color: #fff;
}
#tf_1 {
transform: translate(120%, 1.5rem);
}
#tf_2 {
transform: rotate(45deg);
}
#tf_3 {
transform: scale(0.7, 2);
}
#tf_4 {
transform: skew(30deg, 20deg);
}
アニメーションとの組み合わせ
続いて、animationプロパティとの組み合わせを見て行きましょう。以下の例は、最初の内容を応用して作り出したアニメーションのです。要素にはアニメーションのプロパティを適用し、それに関連付ける形でキーフレームの中にtransformを記述しています。
このように、変形や移動を伴う変化はアニメーションにしたりユーザーの操作に反応するような設定で効果的です。例えば、要素の上にマウスポインタが重なった時にフィードバックを表現したり、タイル状のレイアウトをめくるようなインターフェイスが考えられます。
<div class="samp_box">
<section>
<h1>anime_ts1</h1>
<div id="tf_1">Item</div>
</section>
<section>
<h1>anime_ts2</h1>
<div id="tf_2">Item</div>
</section>
<section>
<h1>anime_ts3</h1>
<div id="tf_3">Item</div>
</section>
<section>
<h1>anime_ts4</h1>
<div id="tf_4">Item</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 {
width: 80px;
margin: .3rem 0 0;
padding: .3rem;
border: 1px solid #000;
text-align: center;
}
#tf_1 {
animation: 3s linear 0s infinite alternate anime_ts1;
}
@keyframes anime_ts1 {
0% { transform: translate(0, 0);}
50% { transform: translate(100%, -1rem);}
100% { transform: translate(200%, 0);}
}
#tf_2 {
animation: 1s linear 0s infinite normal anime_ts2;
}
@keyframes anime_ts2 {
0% { transform: none;}
75% { transform: none;}
100% { transform: rotate(360deg);}
}
#tf_3 {
animation: 1s linear 0s infinite alternate anime_ts3;
}
@keyframes anime_ts3 {
from { transform: none;}
to { transform: scale(1.5, 0.5);}
}
#tf_4 {
animation: 1s linear 0s infinite alternate anime_ts4;
}
@keyframes anime_ts4 {
0% { transform: skew(30deg, 20deg);}
25% { transform: skew(30deg, 20deg);}
50% { transform: skew(0deg, 0deg);}
75% { transform: skew(-30deg, -20deg);}
100% { transform: skew(-30deg, -20deg);}
}
Z軸を使った3Dの表現
座標変換関数ではz軸、すなわち画面の奥行きを扱うことができます。この機能を使うと三次元の立体表現が可能となります。
以下の例では、transform-styleの値にpreserve-3dを指定し、サイコロのような立方体を作成しています。そこにアニメーションで動きを加え、ボックスにドロップシャドウのフィルタを追加することで、インパクトのある表現に仕上げています。
CSSの指定は少し複雑ですが、各プロパティの機能を理解すれば十分に応用可能です。それぞれの機能を分解して、パーツとして捉えて見てみましょう。
<div class="samp_box">
<section>
<div class="cube_wrapper">
<ul>
<li class="face_1">1</li>
<li class="face_2">2</li>
<li class="face_3">3</li>
<li class="face_4">4</li>
<li class="face_5">5</li>
<li class="face_6">6</li>
</ul>
</div>
</section>
</div>
.samp_box {
overflow: auto;
background-color: #eee;
}
.samp_box > section {
margin: 100px 1rem;
background-color: #fff;
}
/* 立方体のコンテナを作成 */
.cube_wrapper {
position: relative;
top: 0;
left: 50%;
width: 200px;
height: 200px;
transform: translateX(-50%);
perspective: 500px;
perspective-origin: 100%;
filter: drop-shadow(20px 20px 20px rgba(0,0,0,0.5));
}
/* 立方体を作成 */
.cube_wrapper > ul {
width: 100%;
height: 100%;
padding: 0;
color: #fff;
font-size: 4rem;
font-weight: bold;
text-align: center;
line-height: 200px;
list-style: none;
transform-style: preserve-3d;
animation: 30s linear 0s infinite normal none running TurnCube;
}
/* アニメのキーフレーム */
@keyframes TurnCube {
0%{ transform: rotateX(0deg) rotateY(0deg);}
100%{ transform: rotateX(360deg) rotateY(360deg);}
}
/* 立方体のパーツ */
.cube_wrapper li {
position: absolute;
width: 100%;
height: 100%;
}
.face_1 {
transform: translateZ(100px);
background-color: rgba(0, 0, 0, 0.1);
}
.face_2 {
transform: translateY(-100px) rotateX(90deg);
background-color: rgba(255, 0, 153, 0.7);
}
.face_3 {
transform: translateX(-100px) rotateY(-90deg);
background-color: rgba(255, 153, 0, 0.7);
}
.face_4 {
transform: translateY(100px) rotateX(-90deg);
background-color: rgba(250, 59, 59, 0.7);
}
.face_5 {
transform: translateX(100px) rotateY(90deg);
background-color: rgba(0, 153, 255, 0.7);
}
.face_6 {
transform: translateZ(-100px) rotateX(180deg);
background-color: rgba(0, 191, 115, 0.7);
}