回転や変形


オブジェクトの回転

 transform属性を使うと矩形を回転することができます。回転の指定は下のようにします。angleは回転角です。単位として「度」を使う場合は、degを付ける必要があります。(例) 15deg

 回転の中心はオブジェクトの矩形の中心ではなく、左上の角であることに留意してください。これは、transform-origin属性で変更できます。

transform: rotate(angle);
<style>
.rot1 {
  margin-left: 30px;
  width: 160px;
  height: 60px;
  border: solid thin black;
  background-color: cyan;
  transform: rotate(15deg);
}
</style>
<div class="rot1">
rotate(15deg)
</div>

rotate(15deg)

 transform属性は、画像にも適用できます。

coala

3D回転

 3次元座標軸周りに回転させることができます。rotateXを適用すると、回転というより横長にしたって感じです。同様に、rotateYを適用すると見た目、縦長になります。rotateX(), rotateY()の文法ですが、rotateと同じに角度をしてします。

transform: rotateX(angle); transform: rotateY(angle);
<style>
.rotx {
  margin-left: 30px;
  border: solid thin black;
  transform: rotateX(45deg);
}

.roty {
  margin-left: 30px;
  border: solid thin black;
  transform: rotateY(45deg);
}
</style>
<img class="rotx" src="coala.jpg" alt="coala" />
<img class="roty" src="coala.jpg" alt="coala" />
coala coala

 rotateX, rotateYだけでなく、rotateZやrotate3dもあります。次の表にtransform属性の回転関数を示します。

関数説明
rotate(angle)角度angleだけ回転します。
rotate3d(x, y, z, angle)主要ブラウザではサポートされていないようです。
rotateX(angle)3DのX軸周りに角度angleだけ回転します。
rotateY(angle)3DのY軸周りに角度angleだけ回転します。
rotateZ(angle)3DのZ軸周りに角度angleだけ回転します。

 

オブジェクトの移動

 transform属性のtranslate関数はオブジェクトを指定した距離だけ移動します(正確には座標軸の移動)。positionと違って現在位置からの移動距離を指定します。下の例は、矩形を本来の位置から右へ10cm移動させています。

<div class="div1" style="transform: translate(10cm, 0)">10cm</div>
10cm

 この他にも次の表のような関数が使用できます。

関数説明
translate(x, y)X軸方向へ距離 x 、Y軸方向へ距離 y だけ移動させます。
translateX(y)X軸方向へ距離 x だけ移動させます。
translateY(y)Y軸方向へ距離 y だけ移動させます。
translateZ(z)Z軸方向へ距離 z だけ移動させます。
translate3d(x, y, z)それぞれの座標軸方向へ距離 x, y, z だけ移動させます。

オブジェクトの拡大・縮小

 transform属性のscale関数を使うとオブジェクトの拡大・縮小を行うことができます。下の例は、1倍と1/2倍の矩形を表示したものです。矩形だけでなく内部の文字列も拡大・縮小されることに留意してください。

<div class="div1">normal</div>
<div class="div1" style="transform: scale(0.5, 0.5)">half</div>
normal
half

 この他にも次の表のような関数が使用できます。

関数説明
scale(sx, sy)矩形の幅と高さをそれぞれsx, sy倍する。
scaleX(sx)矩形の幅をsx倍する。
scaleY(sx)矩形の高さをsy倍する。
scaleZ(sz)矩形のZ軸方向の深さをsz倍する。
scale3d(sx, sy, sz)scale(sx, sy)にZ軸方向のスケールを追加したもの

オブジェクトの傾斜

 transform属性のskew関数を使うとオブジェクトを傾斜させることができます。

<div class="div1" style="transform: skew(-10deg, 2deg)">-10deg, 2deg</div>
-10deg, 2deg

 この他にも次の表のような関数が使用できます。

関数説明
skew(ax, ay)矩形の傾斜をX軸、Y軸方向で角度 ax, ay にする。
skewX(ax)矩形の傾斜をX軸で角度 ax にする。
skewY(ay)矩形の傾斜をY軸で角度 ay にする。

遠近効果

 transform属性のperspective関数を使うと遠近効果を出すことができるらしいです。(注意) 主要ブラウザでのサポートはないようです。


matrix, matrix3d

 マトリクスを使った変形ができるようですが、前述の関数の組み合わせのようです。


変形の原点を指定

 transform-origin属性を使用すると矩形を変形するときの原点を変更できます。下の例は、左上点(旧原点)から矩形の横方向とたて方向へ10%, 20%だけ移動して回転させたものです。transform-originは下のように値を指定します。

transform-origin: x-axis y-axis z-axis|initial|inherit;
<div class="box1" style="transform: rotate(15deg); transform-origin: 10% 20%;">transform-origin</div>
transform-origin

 下の表にtransform-originで指定できる値について示します。

パラメータ
X軸 left
center
right
長さの値
%
Y軸 top
center
bottom
長さの値
%
Z軸長さの値
initial初期値にする。
inherit継承した値。

子要素のスタイル

 transform-styleは子要素のスタイルをフラットか3Dで表示するかの指定を行います。デフォルトはフラットです。

 

 

 

このページの先頭へ戻る