transform

要素を移動、拡大縮小、回転、などなど、することができる

transform

translate: 移動

scale: 拡大縮小

rotate: 回転

transform - translate (移動) -

default

transform:

translate(10px, 10px)

y

y

x

x

transform - scale (拡大縮小) -

default

transform: scale(2)

transform - rotate (回転) -

default

transform:

rotate(45deg)

First Question

transform: scale(2) rotate(135deg) translateX(100px)

y

x

origin

transform: scale(2) rotate(135deg) translateX(100px)

y

x

1

origin

transform: scale(2) rotate(135deg) translateX(100px)

y

x

2

origin

transform: scale(2) rotate(135deg) translateX(100px)

y

x

3

origin

transform: scale(2) rotate(135deg) translateX(100px)

y

x

4

origin

transform: scale(2) rotate(135deg) translateX(100px)

y

x

1

2

3

4

https://codepen.io/deren2525/pen/dyPoOwp?editors=1100