変形

CSSの変形

CSSの“transform”プロパティを使用すると要素の形状を変形させることができます。

変形関数を使用するとCSSだけで要素に拡大や縮小、反転、回転、歪ませるといった変形を加えたり、平行移動させたりすることができます。

<p>

猫は、上のかぎり黒くて、ことはみな白き。

</p>

<p class="sample1">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

<p class="sample2">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

<p class="sample3">

猫は、上のかぎり黒くて、ことはみな白き。

</p>

猫は、上のかぎり黒くて、ことはみな白き。

猫は、上のかぎり黒くて、ことはみな白き。

猫は、上のかぎり黒くて、ことはみな白き。

猫は、上のかぎり黒くて、ことはみな白き。

変形は“animation”プロパティや“transition”プロパティによるアニメーションと相性が良く、よく要素に動きをつけるために使用されます。

なお、変形関数を使用して要素に加えられる変形は線型変換であるため、要素を曲げるなどの変形は加えることができません。

変形のサンプル

二次元の変形

三次元の変形

仕様書

定義されている仕様書

matrix()
translate()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skew()
skewX()
skewY()
matrix3d()
translate3d()
translateZ()
rotate3d()
rotateX()
rotateY()
rotateZ()
perspective()

“<transform-function>”値

“<transform-function>”値は“transform”プロパティの値として使用することができるいくつかの変形関数で、どのような変形を要素に適用するかを設定します。

変形関数には二次元平面上(xy-平面)での変形を指定することができる三次元変形関数と三次元空間内での変形を指定することができる三次元変形関数があります。

二次元変形関数

関数	説明
matrix()	二次元平面上で要素をアフィン変換する
translate()	二次元平面上で要素を平行移動する
translateX()	X軸方向に要素を平行移動する
translateY()	Y軸方向に要素を平行移動する
scale()	二次元平面上で要素を拡大もしくは縮小する
scaleX()	X軸方向に要素を拡大もしくは縮小する
scaleY()	Y軸方向に要素を拡大もしくは縮小する
rotate()	二次元平面上で要素を回転する
skew()	二次元平面上で要素をシアー変換する
skewX()	X軸方向に要素をシアー変換する
skewY()	Y軸方向に要素をシアー変換する

3D変形関数

関数	説明
matrix3d()	三次元空間内で要素をアフィン変換する
translate3d()	三次元空間内で要素を平行移動する
translateZ()	Z軸方向に要素を平行移動する
scale3d()	三次元空間内で要素を拡大もしくは縮小する
scaleZ()	Z軸方向に要素を拡大もしくは縮小する
rotate3d()	三次元空間内で要素を回転する
rotateX()	X軸を回転軸として要素を回転する
rotateY()	Y軸を回転軸として要素を回転する
rotateZ()	Z軸を回転軸として要素を回転する
perspective()	要素から視点までの距離を変更する

座標空間

変形関数はX軸、Y軸、Z軸が原点で直交する直交座標系を使用します。

何も変更されていない初期座標系ではxy-平面が文書の描画される領域(ディスプレイやプリントアウトされる場合は紙など)に平行で、X軸は左から右へ、Y軸は上から下へ、Z軸は奥から手前へ増加します。

変形の原点は既定では要素の中央ですが、“transform-origin”プロパティによって変更できます。

また、要素が三次元描画コンテキストに参加している場合には要素は兄弟要素と共有された座標空間に配置され、三次元変形によって重なり合う順序を変更したり、交わらせたりすることができます。

なお、三次元描画コンテキストに属していない要素に三次元変形を加えた場合は変形されますが、要素が重なり合う順序が変わったり、他の要素と交わったりすることはありません。

変形マトリクス

要素の変形は“アフィン変換(Affine transformation)”によって行われ、すべての変形関数は4×4の行列である“変形マトリクス(Transformation Matrix)”で表すことができます。

アフィン変換は幾何学図形の線型変換と平行移動を同時に行う方法で、同次座標を表すベクトルに行列を乗算することによって行われます。

“同次座標”とは？

“同次座標系(Homogeneous coordinates)”、もしくは斉次座標系は値を一次元分追加した座標系のことで、線型変換や平行移動、投影変換を行列の積で表すために使用されます。

三次元の平行移動は座標を表すベクトルに3×1の行列を加算することで表すことができます。

また、三次元の線型変換は座標を表すベクトルに3×3の行列を乗算することで表すことができます。

しかし、3×3の行列の乗算では平行移動を表すことができないので、線型変換と平行移動を同時に行うには乗算と加算を両方行わなければならず、複数の変形を合成する場合には計算が煩雑になってしまいます。

ここで一次元追加した同次座標を使用すると4×4の行列の乗算のみで線型変換と平行移動をどちらも表すことができます。さらに、複数の変形を合成する場合にも乗算のみで表すことができるようになります。

同次座標系で追加した次元分の値は“w”で表されます。これは射影幾何学で無限遠点(“w=0”)を表すためのものですが、通常は“w=1”とします。

変形マトリクスが“m11=1”、“m22=1”、“m33=1”、“m44=1”の“単位行列(Identity Matrix)”である時はどの座標も変化しないので要素は変形されません。

一見複雑な変形マトリクスですが、いくつかの変形は変形マトリクスのいくつかの成分を変えるだけで行うことができます。

また、二次元平面上(xy-平面)での変形も変形マトリクスの一部の成分によって行われます。

CSSの変形関数では“matrix3d()”関数を使用すると変形マトリクスの16個の成分をすべて記述して変形を表すことができます。

CSSの他のすべての変形関数もすべて“matrix3d()”関数によって表すことが可能ですが、回転などは複雑な数式を引数として記述しなければならず、目的に合った変形関数を使用することで記述を簡略化することができます。

変形の合成

“transform”プロパティの値には複数の変形関数を記述することができます。

複数記述された変形関数は変形マトリクスを乗算することによって合成され、三次元の変形であれば1個の“matrix3d()”関数、二次元の変形であれば1個の“matrix()”関数として要素を変形させます。

<p class="sample4">

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。

</p>

夏の帽額のあざやかなる、簾の外の高欄のわたりに、いとをかしげなる猫の、赤き首綱に白き札つきて、碇の緒くひつきて引きありくもなまめいたり。