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 |