2D 트랜스폼
2D 트랜스폼 (Transform)
회전
rotateX(angle)
rotateY(angle)
rotate(angle)
크기
scaleX() // scalex(1) = 1 값은 100%를 의미
scaleY()
scale(x, y) (X, Y 동시에 적용)
scale() (X, Y 동시에 같은 값을 적용)
값이 1보다 작아지면 크기가 작아지고 1보다 커지면 크기가 커진다.
이동
translateX()
translateY()
translate(x, y) (X, Y 동시에 적용)
비틈
skewX()
skewY()
skew(x, y)
/* 회전 */
.headline {
transform: rotateX(30deg);
transform: rotateY(60deg);
transform: rotate(90deg);
transform: rotate(1.2turn);
}
/* 크기 */
.headline {
transform: scaleX(1.5); (너비를 잡아 당기다)
transform: scaleX(1.5) scaleY(0.7); (너비를 당기고 길이를 줄이다.)
transform: scale(1.5, 0.7);
transform: scale(1.5);
}
/* 이동 */
.headline {
transform: translateX(-40px) translateY(-140px) rotate(10deg);
transform: translate(120px -40px)
}
/* 비틈 */
.headline {
transform: skewX(30deg);
/* transform: skew(15deg, 15deg); */
}
/* 이미지의 회전축 */
.headline {
transform-origin: 50% 50% (x, y 기본값)
transform: rotate(70deg);
}
주의
.headline {
transform: scaleX(0.5);
transform: scaleY(0.5); /* 아래에 있는 y값이 위의 x값을 덮어쓰게 된다. */
/* transform: scale(0.5,0.5); */
/* transform: scaleX(0.5) scaleY(0.5) */
}
한 요소에 여러개의
<transform>
을 사용할 때는 확인
참고
Last updated
Was this helpful?