[CSS] transform 속성과 사용법

🎯 transform 속성과 사용법

• 특정 영역을 회전시키거나, 확대/축소시키거나 각도를 변경하여 비틀거나 위치를 변경하는 등의 효과를 적용할 때 사용된다.

 

📝 transform 속성

• rotate(00deg) : 입력한 각도만큼 회전(시계방향), 음수 가능(반시계 방향으로 회전)
• scale(4, 5) : 확대 축소, widht를 4배 & height를 5배 확대
• skew(5deg(x), 10deg(y)) : x축, y축을 기준으로 입력한 각도만큼 비틂
• translate(50px(x), 120px(y)) : 현재 위치에서 지정한 값만큼 x축, y축 이동

transform: rotate(30deg); /* 회전 */
transform: translate(12px, 30px); /* 위치 변경 */
transform: scale(2, 0.5); /* 확대 축소 */
transform: skew(30deg, 20deg); /* 각도 변경 */

 

주의

• 트랜스폼 속성을 다시 정의하면 이전에 정의한 속성들이 사라진다. → 나중에 작성한 트랜스폼 속성만 적용된다.
• 함께 적용하려면 한 줄에 모두 적어주면 된다.
• transform: rotate(45deg) scale(1, 1.1) translate(100px, 200px) skew(10deg, 20deg);

 

📌 참고

• 변형(transform) - 생활코딩