[CSS] Transform

 

◽ Transform을 사용하는 이유

- 하드웨어 가속을 사용(GPU를 사용) 속력과 성능이 굉장히 좋다. CSS3를 적극적으로 사용할 수 있다면 transform을 사용하는 것이 좋다. position: absolute와 top, left를 사용하는 것보다 transform을 사용하는 것이 부드럽게 동작하는 등 유려하며 성능면에서도 훨씬 좋다.

 

 

◽ transform 사용하기

.box {
    width: 100px;
    height: 100px;
    border: 2px solid black;
    background: red;
}

 

적용할 수 있는 값: scale, rotate, skew, translate

scale(1): 100%

scale(2): 200%

.box:hover {
    transform: scale(2); // 크기만 조정
    transform: scale(2) retate(45deg); // 함께 사용할 수도 있다.
    transform: skew(30px); 
}

 

기본적으로 적용되는 기준점이 중앙이며, transform-origin을 사용하여 변경할 수 있다.

.box:hover {
    transform-origin: right top; // 오른쪽 위
    transform-origin: right bottom; // 오른쪽 아래
    transform-origin: 0% 0%; // (가로방향) (세로방향)
    transform-origin: 30% 80%; // (가로방향) (세로방향)
}

 

 

 

---

 

 

 

출처

인터랙티브 웹 개발 제대로 시작하기 - 인프런 | 강의