Weblasts

transformプロパティで要素を変形させる

transformプロパティ

transformプロパティは、要素を変形させるプロパティ
変形には移動、回転、伸縮、傾斜の4つがあり、transformプロパティの値に関数を指定することで、 移動、回転、伸縮、傾斜の設定ができます。
このプロパティには3Dの概念もあり
x軸は水平方向
y軸は垂直方向
z軸は奥行き
それぞれの設定になる

使うときの注意点

transformプロパティはただのプロパティでしかないので、transformプロパティを複数記述すると最後のtransformプロパティのみ反映される形になるので
必ずまとめて記述すること
値の関数を複数記述するときは、半角スペースを使って値の関数を区切って使うこと

translate系の関数

translate系の関数で、要素の移動の指定ができます
移動距離の単位は()の中にpxで指定します
各関数の説明は下表の通り

translate()関数X軸とY軸の移動(2D)をまとめて指定
translateX()関数X軸の移動を指定
translateY()関数y軸の移動を指定
translateZ()関数z軸の移動を指定
translate3d()関数X軸とY軸とz軸の移動(3D)をまとめて指定

translate()関数

X軸とY軸の移動をまとめて指定できます
値はカンマで区切りましょう

hoverで動きます

移動

translateX()関数

X軸の移動を指定
値は一つだけ

hoverで動きます

移動

translateY()関数

y軸の移動を指定
値は一つだけ

hoverで動きます

移動

translateZ()関数

z軸の移動を指定
値は一つだけ

hoverで動きます

移動

translate3d()関数

X軸とY軸とz軸の移動(3D)をまとめて指定
値はカンマで区切りましょう

これは書式だけ

rotate系の関数

rotate()関数を使うと要素の回転を指定することができます。
値は回転させる角度を指定します。
単位はdegで、90度回転させたいときは90degと指定します。
正の数だと時計回りで回転し、負の数だと反時計回りに回転します。

rotate()関数要素中心を基準に回転
rotateX()関数x軸を基準に回転
rotateY()関数y軸を基準に回転
rotateZ()関数z軸を基準に回転

rotate()関数

要素中心を基準に回転します

hoverで動きます

回転

rotateX()関数

x軸を中心を基準に回転します

hoverで動きます

回転

rotateY()関数

x軸を中心を基準に回転します

hoverで動きます

回転

rotateZ()関数

z軸を中心を基準に回転します
rotate()関数と同じ動きをする

hoverで動きます

回転

scale系の関数

scale()関数を使うと要素の伸縮の指定ができます。
値は数値のみで指定し、数値は1を基準に伸縮する比率を整数または少数で指定する

scale()関数X軸とY軸の伸縮率をまとめて指定
scaleX()関数X軸の伸縮率を指定
scaleY()関数y軸の伸縮率を指定

scale()関数

X軸とY軸の伸縮率をまとめて指定
値はカンマで区切る

hoverで動きます

伸縮

scaleX()関数

X軸の伸縮率を指定

hoverで動きます

伸縮

scaleY()関数

y軸の伸縮率を指定

hoverで動きます

伸縮

skew系の関数

skew()関数を使うと要素の傾斜の指定ができます
傾斜角度の単位はdegで指定します

skew()関数X軸とY軸の傾斜角度をまとめて指定
skewX()関数X軸の傾斜角度を指定
skewY()関数y軸の傾斜角度を指定

skew()関数

X軸とY軸の傾斜角度をまとめて指定
値はカンマで区切る

hoverで動きます

傾斜

skewX()関数

X軸の傾斜角度を指定

hoverで動きます

傾斜

skewY()関数

Y軸の傾斜角度を指定

hoverで動きます

傾斜
PROFILE

フリーランスでweb系のデザイン・コーディング&プログラミングをしています

youtubeはじめました