css) transform

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

 

transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.

 

translate

element의 위치 조정

 

index.html

one 클래스에 해당하는 빨강박스가 50% x축으로 이동했다. (%가 positive값이기 때문에)

 

---

scale

element의 크기 조정

 

 

---

rotate

 

element의 rotation을 조정한다.

찾아보니 유니티와 비슷하게 작동한다. 

각각의 축으로 뻗어나가는 원통이 있다고 생각하고 그 원통을 돌린다고 생각하면 된다.

 

그렇다면 가장 자주 쓰이는것은 rotateZ() 가 될것이다.

따라서 rotate()로 나타내면 rotateZ()와 같다.

 

https://testdrive-archive.azurewebsites.net/Graphics/FullPageAnimations/2_CSSTransforms_a.html

 

 

 

---

skew

 

element를 비스듬하게 만든다.