1) transform position을 사용하게되면 부하가 걸리게된다. transform와 같이 애니매이션에 특화된 속성을 사용해야 한다. 사용법 1. position을 이용한 애니메이션 효과(잘못된 사용방법) html 123 css .box { width: 200px; height: 200px; background: tomato; display: flex; justify-content: center; align-items: center; font-size: 30px; transition: 1s; position: relative; left: 0; top: 0; } .box:hover { position: relative; left: 100px; top: 30px; } ※ rendering이 다시 되기..
CSS) transform 변환 2D 속성
1) transform 2D 변환 함수 글꼴(서체) 지정 속성 값 값(변환함수) 의미 기본값 translate(x, y) 이동(x축, y축) 단위 translateX(x) 이동(x축) 단위 translateY(y) 이동(y축) 단위 scale(x, y) 크기(x축, y축) 없음(배수) scaleX(x) 크기(x축) 없음(배수) scaleY(y) 크기(y축) 없음(배수) rotate(degree) 회전(각도) deg skew(x-deg, y-deg) 기울임(x축, y축) deg skewX(x-deg) 기울임(x축) deg skewY(y-deg) 기울임(y축) deg matrix(n,n,n,n,n,n) 2차원 변환 효과 없음 matrix보다는 명시적으로 다른 함수를 사용하는 것이 효율적이다. rotate 회..