Web制作のアレコレ

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軸の移動をまとめて指定できます
値はカンマで区切りましょう

CSS


 .translate:hover{
    transform: translate(50px,50px);
  }

hoverで動きます

移動

translateX()関数

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

CSS


 .translatex:hover{
    transform: translatex(50px);
  }

hoverで動きます

移動

translateY()関数

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

CSS


 .translatey:hover{
    transform: translatey(50px);
  }

hoverで動きます

移動

translateZ()関数

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

HTML


<div class="translatebox">
<div class="translateZ">移動</div>
</div>
CSS


.translatebox {
  transform-style:preserve-3d;
  perspective:500px;
}
.translateZ {
  width:80px;
  height:80px;
  margin:0 auto;
  transition-duration: 1s;
  background:rgba(255,0,0,0.8);

}
.translateZ:hover {
  transform:translateZ(100px);
}

hoverで動きます

移動

translate3d()関数

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

これは書式だけ

CSS


セレクタ名 {
  transform:translate3d(X軸方向,Y軸方向,Z軸方向);
}

rotate系の関数

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

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

rotate()関数

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

CSS


 .rotate:hover{
    transform: rotate(180deg);
  }

hoverで動きます

回転

rotateX()関数

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

CSS


 .rotatex:hover{
    transform: rotateX(180deg);
  }

hoverで動きます

回転

rotateY()関数

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

CSS


 .rotatey:hover{
    transform: rotateY(180deg);
  }

hoverで動きます

回転

rotateZ()関数

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

CSS


 .rotatez:hover{
    transform: rotateZ(180deg);
  }

hoverで動きます

回転

scale系の関数

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

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

scale()関数

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

CSS


 .scale:hover{
    transform: scale(1.5,1.5);
  }

hoverで動きます

伸縮

scaleX()関数

X軸の伸縮率を指定

CSS


 .scalex:hover{
    transform: scalex(1.5);
  }

hoverで動きます

伸縮

scaleY()関数

y軸の伸縮率を指定

CSS


 .scaley:hover{
    transform: scaleY(1.5);
  }

hoverで動きます

伸縮

skew系の関数

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

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

skew()関数

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

CSS


 .skew:hover{
    transform: skew(45deg,45deg);
  }

hoverで動きます

傾斜

skewX()関数

X軸の傾斜角度を指定

CSS


 .skewx:hover{
    transform: skewX(45deg);
  }

hoverで動きます

傾斜

skewY()関数

Y軸の傾斜角度を指定

CSS


 .skewy:hover{
    transform: skewY(45deg);
  }

hoverで動きます

傾斜