CSSで可能な変形いろいろ（拡大縮小・回転など）
拡大・縮小や回転、傾斜。
Illustrator等の画像編集アプリケーションではお馴染みのこうした変形は、CSSのtransformプロパティで実装することが可能です。
当サイトには、広告が含まれているページがあります。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
要素の変形にはtransformプロパティ
拡大縮小でも回転でも、変形に関するプロパティにはtransformを使います。
基本の使い方は以下の通りです。
/* transformプロパティの値に、変形の種類と変形量を設定 */
div{
transform: 変形の種類(変形量);
}
以下、transformプロパティで行える代表的な変形の種類です。
移動
・translate：移動
・translate3d：3D移動
・translateX/Y/Z：X/Y/Z方向の移動
拡大・縮小
・scale：拡大・縮小
・scale3d：3Dの拡大・縮小
・scaleX/Y/Z：X/Y/Z方向の拡大・縮小
回転
・rotate：回転
・rotate3d：3Dの回転
・rotateX/Y/Z：X/Y/Z方向の回転
傾斜
・skew：要素の傾斜
・skewX/Y：XX/Y方向の傾斜
このページでは省略しますが、他にmaxtrixやmatrix3d（行列を利用した変形）、perspective(遠近感のついた変形設定)などもあります。
移動
translate：要素を移動する
要素を移動する事のできるプロパティです。
ちょっと違和感があるかもしれませんが、移動も変形の仲間として扱われているんですね。
サンプル
以下は、要素を本来の位置からX方向に10px、Y方向へ20px移動させた例です。
div{
transform: translate(10px, 20px);
}
値が1つの場合は、縦横とも同じ移動量になります。
/* X方向もY方向も20px移動 */
div{
transform: translate(20px);
}
translate3d：3Dによる移動
translate3dプロパティを使うと、3Dを意識した移動設定を行うことができます。
Z軸は、画面の手前/奥に関する軸です。
/* X方向に10px、Y方向へ20px、Z方向へ50px移動 */
div{
transform: translate3d(10px, 20px, 50px);
}
translateX/Y/Z：X/Y/Z方向の移動
1方向のみの移動を設定する場合は、translateX、translateY、translateZプロパティを使うことができます。
/* X方向の移動 */
div{ transform: translateX(10px); }
/* Y方向の移動 */
div{ transform: translateY(10px); }
/* Z方向の移動 */
div{ transform: translateZ(10px); }
拡大・縮小
scale：要素を拡大・縮小する
要素を拡大・縮小する事のできるプロパティです。
サンプル
以下は、要素の幅を150%、縦を50%に変形させた例です。
div{
transform: scale(1.5, .5);
}
値が1つの場合は、縦横とも同じ拡大・縮小率になります。
/* 幅も高さも50%に縮小 */
div{
transform: scale(.5);
}
scale3d：3Dによる拡大・縮小
scale3dプロパティを使うと、3Dを意識した拡大・縮小を行うことができます。
/* X方向は150%、Y方向は50%、Z方向は70%に拡大・縮小 */
div{
transform: scale3d(1.5, .5, .7);
}
scaleX/Y/Z：X/Y/Z方向の拡大・縮小
1方向のみの拡大・縮小率を設定する場合は、scaleX、scaleY、scaleZプロパティを使うことができます。
/* X方向の拡大・縮小 */
div{ transform: scaleX(1.5); }
/* Y方向の拡大・縮小 */
div{ transform: scaleY(1.5); }
/* Z方向の拡大・縮小 */
div{ transform: scaleZ(1.5); }
回転
rotate：要素を回転させる
要素を回転する事のできるプロパティです。
サンプル
以下は、要素を45度回転させた例です。
div{
transform: rotate(45deg);
}
rotate3d：3Dによる回転
rotate3dプロパティを使うと、3Dを意識した回転設定を行うことができます。
サンプル
rotate3dは使い方が特殊で、4つの値を必要とします。
・最初の3つの値：回転方向のベクトルを定める（それぞれがX・Y・Zを表す）
・4つ目の値：回転の角度
div{
transform: rotate3d(1, .5, .5, 60deg);
}
rotateX/Y/Z：X/Y/Z方向の回転
1方向のみの回転を設定する場合は、rotateX、rotateY、rotateZプロパティを使うことができます。
/* X軸の回転 */
div{ transform: rotateX(45deg); }
/* Y軸の回転 */
div{ transform: rotateY(45deg); }
/* Z軸の回転 */
div{ transform: rotateZ(45deg); }
傾斜
skew：要素を傾斜させる
要素を傾斜する事のできるプロパティです。
サンプル
以下は、要素をX方向に10度、Y方向に20度傾斜させた例です。
div{
transform: skew(10deg, 20deg);
}
値が1つの場合は、縦横とも同じ傾斜角度になります。
/* X方向もY方向も20度傾斜 */
div{
transform: skew(20deg);
}
skewX/Y：X/Y方向の傾斜
1方向のみの傾斜を設定する場合は、skewX、skewYプロパティを使うことができます。
/* X軸の傾斜 */
div{ transform: skewX(20deg); }
/* Y軸の傾斜 */
div{ transform: skewY(20deg); }
変形の基準位置を指定する
transform-origin
通常の変形では、要素の中心を基準位置としますが、transform-originプロパティを使うと、その位置を変更することができます。
サンプル
以下は、transform-originプロパティを使った回転の基準位置に関する例です。
・左：回転していない状態
・中央：通常の回転。回転の基準点は、要素の中心
・右：transform-originプロパティで、基準点を左上に変更した回転
/* 基本の回転（要素の中心を起点に回転） */
div{
transform: rotate(20deg);
}
/* 回転の起点を左上に設定 */
div{
transform-origin: top left;
transform: rotate(20deg);
}
transform-originプロパティでは、以下のキーワードを設定することができます。
・縦方向のバリエーション：top ／ center ／ bottom
・横方向のバリエーション：left ／ center ／ right
また、数値やパーセントで指定することもできます。
/* 数値で指定した例 */
div { transform-origin: 50px 100px; }
/* パーセントで指定した例 */
div { transform-origin: 10% 30%; }
実用的な使い方
こうした変形、どんな場合に使えば良いでしょう？
単純に拡大縮小・回転したいのであれば、要素そのものを直接変形すればいいですよね。
CSSによる変形は、マウスイベントと組み合わせる時に役立ちます。
以下は、マウスオーバーすると要素が拡大する例です。
a:hover {
transform: scale(1.2);
}
一緒にtransitionプロパティを使うと、アニメーションになります。
a:hover {
transform: scale(1.2);
transition: transform .3s;
}
