본문 바로가기

CSS

2D Transform

transform

요소의 모양, 크기, 위치 등을 자유롭게 바꿀 수 있습니다.

translate

현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킵니다.
주어진 거리가 양수이면 해당 축의 양의 방향으로, 음수이면 해당 축의 음의 방향으로 이동시킵니다.

div {
    transform : translate(100px, 50px);  
}

rotate

해당 요소를 주어진 각도만큼 회전시킵니다.
양수이면 시계방향으로, 음수이면 반시계 방향으로 회전시킵니다.

div {
    transform : rotate(180deg);  
}

scale

해방 요소의 크기를 주어진 배율만큼 늘리거나 줄입니다.
주어진 배울이 1보다 크면 늘리고, 0보다 크고 1보다 작으면 크기를 줄입니다.

div {
    transform : scale(0.7, 0.7);  
}

skewX

해당 요소를 주어진 각도만큼 x축 방향으로 기울입니다.
양수이면 x축의 양의 방향으로, 음수이면 x축의 음의 방향으로 기울입니다.

div {
    transform : skewX(30deg);  
}

skewY

해당 요소를 주어진 각도만큼 y축 방향으로 기울입니다.
양수면 y축의 양의 방향으로, 음수이면 y축의 음의 방향으로 기울입니다.

div {
    transform : skewY(30deg);  
}

skew

해당 요소를 주어진 각도만큼 각각 x축과 y축 방향으로 기울입니다.

div {
    transform : skew(30deg, 20deg);  
}

matrix

모든 2D transform 속성을 한 줄에 설정할 수 있도록 해줍니다.

transform : matrix(2, 0.2, 0.3, 2.3, 150, 200);
// matrix(scaleX, skewY, skewX, scaleY, translateX, translateY);

'CSS' 카테고리의 다른 글

calc()  (0) 2020.07.21
transition  (0) 2019.03.15
background  (0) 2019.03.11
overflow  (0) 2019.03.11
opacity  (0) 2019.03.11