CSS - transform: rotate, scale, translate, skew (애니메이션 효과)

닌니디자인 CSS 썸네일

 

transform

요소의 모양, 크기 및 위치를 변경하는 데 사용된다. 다양한 변형 함수를 사용하여 요소를 회전(rotate), 크기 조정(scale), 이동(translate), 기울이기(skew) 등을 할 수 있다. 공통적으로 x, y, z축 또는 3D(x,y,z) 방향으로 변경한다. x축은 가로방향, y축은 세로방향, z축은 3D 변환에서 사용된다. x, y, z축을 함축해서 사용 할 수도 있는데 이때는 x, y, z축 순으로 작성한다. 여러 속성을 함께 사용하여 요소에 다양한 변형을 적용할 수 있다. 시각적 모양을 동적으로 변경하기 위해 주로 사용되며, 다양한 애니메이션 효과를 구현하는 데도 자주 활용된다. 애니메이션 효과를 구현할때 자연스러운 움직임을 위해 transition 속성을 함께 사용한다. 

new_releases Tip

음수를 넣으면 음의 방향으로 이동한다.

일반적으로 x축에서 음수는 왼쪽, 양수는 오른쪽 방향으로 변경되고 y축에서 음수는 위, 양수는 아래 방향으로 변경된다. 마찬가지로 z축에서 음수는 뒤, 양수는 앞 방향으로 변경된다.
skew는 조금 다르다. x축과 y축 모두 음수를 넣으면 시계 왼쪽방향, 양수를 넣으면 시계오른쪽 방향으로 기울인다.

 

 

속성

rotate

요소를 지정된 x, y, z 축 또는 3D(x,y,z) 방향으로 회전한다. 일반적으로 각도(deg)를 사용하지만 라디안(rad)을 사용할 수도 있다.

.transform {
    transform: rotateX(-45deg);
    transform: rotateY(-45deg);
    transform: rotateZ(45deg);
    transform: rotate(45deg, -90deg);
    transform: rotate3d(10deg, 20deg, -90deg);
}

 

scale

요소를 지정된 비율의 크기로 조정한다. 단위없이 소수점 자리까지 표시하여 사용한다.

.transform {
    transform: scaleX(-1.5);
    transform: scaleY(-1.5);
    transform: scaleZ(0.8);
    transform: scale(-1.2, 1.2);
    transform: scale3d(0.5, -1.0, 1.1);
}

 

translate

요소를 지정된 x, y, z 축 또는 3D(x,y,z) 방향으로 이동한다. 픽셀, 백분율, em 등의 단위를 사용한다.

.transform {
    transform: translateX(-50%);
    transform: translateY(-50%);
    transform: translateZ(50%);
    transform: translate(-50%, -50%);
    transform: translate3D(-50%, -50%, 100%);
}

 

skew

요소를 지정된 각도로 기울인다. 단위는 각도(deg)만 사용한다.

.transform {
    transform: skewX(10deg);
    transform: skewY(-10deg);
    transform: skew(10deg, -10deg);
}

new_releases Tip

여러 속성을 한꺼번에 넣을때는 속성들을 나열하면 된다.

transform:translate(-50%, -50%) skew(-20deg) scaleX(-1) scale(1.1) rotate(45deg);

 

 

---

 

domain_verification Source

translate3d() - CSS: Cascading Style Sheets | MDN