CSS3トランスフォーム

CSS3トランスフォーム：transform

前回は、CSS3グラデーションにつきまして、ソースコードを交えながら記載いたしました。
グラデーションを指定する値および順序が、多少複雑ではありますが、これも慣れですね！また、慣れるまではご紹介いたしましたジェネレータで記載していくのもありかと思います。

今回はCSS3トランスフォームについて記載していこうかと思います。
transformプロパティは、要素に対して拡大・縮小、回転や移動に加え、歪などのさまざまな表現ができるプロパティになります。transformには2次元（2D)で処理できるものと、3次元（3D）で処理できるものがあり、それぞれtransform関数で指定します。また、3Dtransformを使う際にポイントとなる奥行の設定につきましても記載していこうと思います。

という事で、それでは今回はッ、

上記について記載していこうと思います…。

transufomプロパティ

要素を変形させるための拡大・縮小や、回転、移動などはすべてtransformプロパティで指定をおこないます。transformで要素を変形させるには、関数を使って値を指定していくことになります。
この関数には2次元（2D）のものと、3次元（3D)のものがあり、3次元では奥行の設定や遠近効果の指定が可能になります。
transformプロパティはCSSアニメーションと併用した動きのある表現も可能で、デザインに応じたインタラクションを設定することもできます。また、スペースで区切ることで複数の値を指定することも可能です。

transformの使いどころとしては、サイトのナビゲーションやボタンへの使用のほか、ポラロイド風の写真をランダムに並べたコンテンツなどでよく見かけることがあります。また、コンテンツ全体を斜めにレイアウトするなど、大胆に設定してデザインに変化を付けることもできます。

2Dtransform関数

3Dtransform関数

rotate()回転

rotateは要素の回転を設定する関数で、時計回りで角度を記述します。特に中心点についての記述がない場合、回転の要素は要素の中心となります。紹介する例では20度（20deg）の回転を指定しました。
指定する数値にマイナス値を指定することで、反時計回りの回転を表現することもできます。

scale()拡大・縮小

要素の拡大・縮小を行うには、scaleで値を設定します。数値の指定はX軸とY軸の比率を記述しますが、ひとつのみの場合は双方とも同じ数値が指定されたと解釈されます。
ここでは最初の例にひとつの数値のみをしています。後の例ではX軸の割合は縮小させ、Y軸は拡大させるよう指定してみました。

skew()傾斜

skewは傾斜変形を扱うtransform関数になります。skew(X軸の傾斜、Y軸の傾斜）と記述しますが、X軸のみ記述している場合は、Y軸の傾斜はないものと解釈されます。skewY()、skewX()のように、X軸もしくはY軸の傾斜を個別に指定することも可能です。

X軸のみの傾斜

Y軸のみの傾斜

2D transformの基準点につきまして

ここまでの例では、要素が変形する際の基準点を指定していないので、デフォルトの要素の中央（50%、50%の位置）となっています。基準点につきましては、transform-originで設定することが可能です。

transform-originの値は、左上を基準としてX軸の距離とY軸の距離を指定します。この場合、要素の対して左上からX軸に100%の距離（右端）、Y軸に100%の距離（下端）となります。このように%で指定できるほか、left、right、top、bottomというキーワード指定や、pxでの細かな指定も可能になっています。

3D transformとperspective

3次元のtransformプロパティでは、2次元のX軸、Y軸の指定に加え、Z軸の指定が可能になっています。関数を2次元のものと比較してみると、3DやZ軸に関する指定が増えています。この場合のZ軸はブラウザ画面に対して手前に向かう距離を示す値となります。

perspectiveは、3Dtransformにおける重要な関数になります。これは要素から閲覧する地点までの距離を指定するもので、要素から距離が近いほど歪が大きくなります。

Y軸に20度の回転処理に加え、perspectiveを200pxとした場合の表示例です。奥行きが表現されるようになります。

3D transformの基準点につきまして

2Dtransformと同様、3Dの場合も基準点を指定することは可能です。この場合もtransform-originで指定しますが、3Dの場合は、デフォルトの状態だとX軸とY軸は要素の中心地点（50%、50%の位置）、Z軸については0と解釈されます。

Y軸に20度の回転を加え、perspectiveは200pxと指定した要素に基準点を設定しました。この場合、X軸に100%の距離の右端、Y軸は要素の下端、右下を基準として歪みが表現されます。

perspectiveプロパティ

3次元処理をする遠近効果は、transformの関数として使用するperspectiveとは別に、perspectiveプロパティと指定することも可能です。この場合は、子要素にのみ有効になるため、遠近効果を施したい要素の親要素にperspectiveを設定します。

この例では、親のdiv要素にperspectiveを300pxと設定し、子要素の2つのdiv要素にはY軸の回転を50度加えました。分かりやすく両サイドが開いたような状態で表現するために、右側のボックスは、同じ角度でマイナスの値を付けてみました。

backface-visibilityプロパティ

backface-visibilityプロパティは、要素に回転などの変形を加えた際、その裏面を表示させるかを設定するプロパティで「visible」が表示、「hidden」で表示しない設定になります。
下記に分かりやすく表現したサンプルを記載いたします。

backface-visibilityサンプル

という事で今回は、トランスフォームにつきまして、サンプルソースコードを交え記載いたしました。

実際の制作現場では、2Dtransformはたびたび使用することがございますが、3Dtransformはフラットデザインが主流の現在では、流石にあまり使用する機会はございません。しかしながら、使用することができるとワンポイントで目を引きたい時などには、特に有効なように感じますので、しっかりとまでは行かなくとも、覚えておきたいスキルのひとつかと思います。

とりあえず、今回はここまで…。

お仕事のご依頼は↓コチラより…、それではまた次回…。