Transform

http://tcpschool.com/css/css3_transform_2Dtransform

코딩교육 티씨피스쿨

 

2D 속성
값 설명
none 변형 속성을 적용하지 않음
matrix(n,n,n,n,n,n) translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
translate(x,y) 요소의 위치를 옮기는 속성
scale(x,y) 요소의 크기를 비율에 맞춰 확대/축소하는 속성
rotate(angle) 요소를 지정된 각도 만큼 회전시키는 속성
skew
(x-angle, y-angle) 요소를 지정된 각도만큼 모양을 비스듬히 변형시키는 속성
3D 속성
값 설명
none 변형 속성을 적용하지 않음
matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) translate, scale, rotate, skew 각 속성을 한꺼번에 적용할 수 있는 매트릭스 함수
translate3d(x,y,z) 요소의 위치를 옮기는 속성
translateX(x) 요소의 x 좌표 위치를 옮기는 속성
translateY(y) 요소의 y 좌표 위치를 옮기는 속성
translateZ(z) 요소의 z 좌표 위치를 옮기는 속성
scale3d(x,y,z) 요소의 크기를 비율에 맞춰 확대/축소하는 속성
scaleX(x) 요소의 x축 크기를 비율에 맞춰 확대/축소하는 속성
scaleY(y) 요소의 y축 크기를 비율에 맞춰 확대/축소하는 속성
scaleZ(z) 요소의 z축 크기를 비율에 맞춰 확대/축소하는 속성
rotate3d(x,y,z,angle) 요소를 지정된 각도 만큼 회전시키는 속성
rotateX(angle) 요소를 지정된 각도 만큼 x축을 회전시키는 속성
rotateY(angle) 요소를 지정된 각도 만큼 y축을 회전시키는 속성
rotateZ(angle) 요소를 지정된 각도 만큼 z축을 회전시키는 속성
skewX(angle) 요소를 지정된 각도만큼 x축 모양을 비스듬히 변형시키는 속성
skewY(angle) 요소를 지정된 각도만큼 y축 모양을 비스듬히 변형시키는 속성
skewZ(angle) 요소를 지정된 각도만큼 z축 모양을 비스듬히 변형시키는 속성
perspective(n) ..

예시
div {
transform: rotate(15deg);
transform: translateX(230px);
transform: sacle(1.5, 2.6);
transform: skew(220deg, -150deg;
}

4개 속성 합쳐서 표현하면

div {
transform: rotate(15deg) translateX(230px) scale(1.5, 2.6) skew(220deg, -150deg);
}

div {
transform: matrix(1.06, 1.84, 0.54, 2.8, 466px, 482px);
}
위 예제처럼 각각을 나타내는 것보다 matrix 함수로 한번에 만드는게 효율적이지만 매트릭스 이론과 삼각함수를 알아야 한다고 함 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=bugman002&logNo=221314890537 

[CSS] transform matrix

https://blog.daum.net/zhtvkq/15

2D / 3D transform