23. Transformation (1)

<transformation>

한 요소를 tranform(변형)시킬 수 있음.

한 요소에 어떤 변형이든 할 수 있음.

CSS로 3D를 구현할 수 있게 하며 형태를 변화시킴.

 

 

 

1) 이미지 불러오기

이미지를 불러와 스타일을 줌

img폴더에 있는 1.png라는 이미지를 불러옴.

이미지의 boder스타일을 주고,

boder-radius: 50%; 를 하여 boder를 원으로 만듬.

 

 

 

2) transform: rotate

이미지가 x축으로 50도 돌아간 모습

transform: rotate x(50deg); 를 하여

이미지가 x축으로 50도 돌아가도록 함.

 

rotate x를 하면 x축으로 회전하고,

rotate y를 하면 y축으로 회전하고,

rotate z를 하면 z축으로 회전함.

 

,를 사용하여 동시에 여러 개를 적용시킬 수도 있음.

 

x, y축 중 하나라도 90도로 돌리게 되면 일자가 되기 때문에 아무것도 보이지 않음.

 

 

 

2) transform: scale

이미지가 확대되어 브라우저 밖으로 벗어남

transform: scale(2);를 하여

이미지를 2배로 확대함.

 

(2.4)라고 적어서 가로는 2배 세로는 4배로 확대할 수도 있음.

 

 

 

3) transform: translate

이미지가 오른쪽으로 이동한 모습

transform: translate x(100px); 을 하여

이미지가 x축으로 100px만큼 이동함.

 

translate x를 하면 x축으로 이동하고,

translate y를 하면 y축으로 이동함.

 

 

 

4) translate로 보는 transformation의 속성

이미지 파일 다음에 span 태그를 작성한 모습

이미지 파일 다음에 span 태그를 작성하면 이미지 파일 옆에 위치하게 됨.

 

 

여기서 translate를 하게 된다면?

 

이미지가 Hello 위에 올라간 모습

transform: translate x(120px); 을 하여

이미지를 120px 만큼 이동함.

옆에 span 박스가 있지만 그 박스를 밀지 않고 덮어버리며 이동함.

 

 

 

transformation은 페이지의 픽셀의  다른 부분에서 일어남.

box 차원에서 일어나지 않음.

 

그렇기에,

translate는 옆에 div 혹은 span이 존재한다고 하여도

해당 박스를 전혀 밀지 않고 그대로 덮어버리며 이동함.

 

transformation은 box element를 변형시키지 않음.

일종의 3D transformation이기 때문에 margin과 padding이 적용되지 않음.

 

transformation은 다른 box element를 변형시키지 않고

원하는 요소를 이동시키기 위해 사용함.