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

transformプロパティ

transformプロパティは、要素を変形させるプロパティ
変形には移動、回転、伸縮、傾斜の4つがあり、transformプロパティの値に関数を指定することで、移動、回転、伸縮、傾斜の設定ができます。
このプロパティには３Dの概念もあり
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軸の移動をまとめて指定できます
値はカンマで区切りましょう

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

1

2

3

.translate:hover{

transform: translate(50px,50px);

}

hoverで動きます

移動

translateX()関数

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

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

1

2

3

.translatex:hover{

transform: translatex(50px);

}

hoverで動きます

移動

translateY()関数

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

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

1

2

3

.translatey:hover{

transform: translatey(50px);

}

hoverで動きます

移動

translateZ()関数

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

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

1

2

3

</div>

.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);
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.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）をまとめて指定
値はカンマで区切りましょう

これは書式だけ

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

1

2

3

セレクタ名 {

transform:translate3d(X軸方向,Y軸方向,Z軸方向);

}

rotate系の関数

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

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

rotate()関数

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

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

1

2

3

.rotate:hover{

transform: rotate(180deg);

}

hoverで動きます

回転

rotateX()関数

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

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

1

2

3

.rotatex:hover{

transform: rotateX(180deg);

}

hoverで動きます

回転

rotateY()関数

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

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

1

2

3

.rotatey:hover{

transform: rotateY(180deg);

}

hoverで動きます

回転

rotateZ()関数

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

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

1

2

3

.rotatez:hover{

transform: rotateZ(180deg);

}

hoverで動きます

回転

scale系の関数

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

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

scale()関数

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

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

1

2

3

.scale:hover{

transform: scale(1.5,1.5);

}

hoverで動きます

伸縮

scaleX()関数

X軸の伸縮率を指定

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

1

2

3

.scalex:hover{

transform: scalex(1.5);

}

hoverで動きます

伸縮

scaleY()関数

y軸の伸縮率を指定

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

1

2

3

.scaley:hover{

transform: scaleY(1.5);

}

hoverで動きます

伸縮

skew系の関数

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

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

skew()関数

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

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

1

2

3

.skew:hover{

transform: skew(45deg,45deg);

}

hoverで動きます

傾斜

skewX()関数

X軸の傾斜角度を指定

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

1

2

3

.skewx:hover{

transform: skewX(45deg);

}

hoverで動きます

傾斜

skewY()関数

Y軸の傾斜角度を指定

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

1

2

3

.skewy:hover{

transform: skewY(45deg);

}

hoverで動きます

傾斜

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