💡깨달음💡/CSS
CSS3 Transform
과부하가즈아
2023. 9. 6. 21:54
Transform
- rotate: 요소를 회전
- scale: 요소를 확대 또는 축소
- skew: 요소를 비틀기
- translate: 요소의 위치 이동
rotate
transform: rotate( angle )- 평면으로의 회전
- angle에는 각의 크기를 입력
- 단위는 deg, rad, grad, turn 등을 사용
- turn은 1회전, 즉 360deg를 의미
- 각이 양수인 경우 시계방향으로 회전(음수도 가능하며 음수의 경우 반시계 방향으로 회전)
transform: rotateX( angle )- rotateX는 가로를 축으로 하여 회전
transform: rotateY( angle )- rotateY는 세로를 축으로 하여 회전
scale
transform: scale(x, y)- 1보다 큰 수는 확대, 1보다 작은 수는 축소
- 가로로 x배, 세로로 y배 확대
transform: scale( 2 );- 하나의 수만 들어간다면_가로와 세로 모두 2배 확대
transform: scaleX( 2 );- 가로로 2배 확대
transform: scaleY( 2 );- 세로로 1.5배 확대
skew
transform: skew(x_angle, y_angle);- 입력한 각도만큼 요소를 비틀기
- 음수도 가능
- 가로 방향으로 x도, 세로 방향으로 y도 비틀기
transform: skewX( angle );- 가로 방향으로 비틀기
transform: skewY( angle );- 세로 방향으로 비틀기
translate
transform: translate(x, y);- x, y의 좌표로 요소를 이동(기본이 x_오른쪽, y_아래)
- 음수도 가능하며 기본방향의 반대로 이동(x에 음수면 왼쪽으로, y에 음수면 위쪽으로)
transform: translate( 50px, 50% );- 오른쪽으로 50px, 아래쪽으로 50% 이동
transform: translateX( 100px );- 오른쪽으로 50px 이동, 길이 단위를 음수로 지정하면 왼쪽으로 이동
transform: translateY( 100px );- 아래쪽으로 50px 이동, 길이 단위를 음수로 지정하면 위쪽으로 이동
transform의 속성들을 동시에 사용하고 싶다면 한 줄로 이어서 작성해주면 된다.
transform: translate(x, y) scale(1.5);transform-origin
transform의 기준점을 바꾸는 방법
transform-origin: center;- 정중앙의 기준점으로 기본 값이다.
작성 방식
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px; /* 해당 크기 60px*60px */
transform-origin: -100% 50%;
transform: rotate(45deg);- 기준점을 바꿔주고 원하는 변형을 해주면 된다.
참고🖇️
https://www.codingfactory.net/
https://poiemaweb.com/css3-transition
https://poiemaweb.com/css3-animation