Transform

Transform

변환(Transform)은 요소의 좌표를 조작하여, 위치나 크기, 회전, 각도 등을 변경하는 속성입니다. 이동(translate), 확대(scale), 회전(rotate), 기울기(skew), 행렬변환(matrix)가 있습니다.

Transform : none | martix() | translate() | translateX() | translatyY() | scale() | scaleX() | scaleY() | rotate() | rotateX() | rotateY() | skew() | skewX() | skewY() | martix3d() | translate3d() | translateZ() | scale3d() | scaleZ() | rotate3d() | rotateZ() | perspective()

종류 문법 예시 설명
translate translate() transform: translate(10px, 20px) X좌표, Y좌표 이동을 나타냅니다.
translate3d() transform: translate3d(10px, 20px, 30px) X좌표, Y좌표, Z좌표 이동을 나타냅니다.
translateX() transform: translateX(10px) X좌표 이동을 나타냅니다.
translateY() transform: translateY(10px) Y좌표 이동을 나타냅니다.
translateZ() transform: translateZ(10px) Z좌표 이동을 나타냅니다.
scale scale() transform: scale(2, 2) 선택한 요소의 X축과 Y축 확대를 설정합니다.
scale3d() transform: scale3d(2, 2, 2) 선택한 요소의 X축, Y축, Z축 확대를 설정합니다.
scaleX() transform: scaleX(2) 선택한 요소의 X축 확대를 설정합니다.
scaleY() transform: scaleY(2) 선택한 요소의 Y축 확대를 설정합니다.
scaleZ() transform: scaleZ(2) 선택한 요소의 Z축 확대를 설정합니다.
rotate rotate() transform: rotate(10deg, 20deg) 선택한 요소의 X축, Y축 회전을 설정합니다.
rotate3d() transform: rotate3d(10deg, 20deg, 30deg) 선택한 요소의 X축, Y축, Z축 회전을 설정합니다.
rotateX() transform: rotateX(10deg) 선택한 요소의 X축 회전을 설정합니다.
rotateY() transform: rotateY(10deg) 선택한 요소의 Y축 회전을 설정합니다.
rotateZ() transform: rotateZ(10deg) 선택한 요소의 Z축 회전을 설정합니다.
skew skew() transform: skew(10deg, 20deg) 선택한 요소의 X축, Y축 기울기를 설정합니다.
skewX() transform: skewX(10deg) 선택한 요소의 X축 기울기를 설정합니다.
skewY() transform: skewY(10deg) 선택한 요소의 Y축 기울기를 설정합니다.
etc transform-origin transform-origin: 20%, 30% 선택한 요소의 X축, Y축 기준점을 설정합니다.
transform-style transform-style: preserve-3d 선택한 요소 스타일을 3D로 설정합니다.
perspective perspective: 500px 선택한 요소의 원근점 거리를 설정합니다.
perspective-origin perspective-origin: 500px 선택한 요소의 원근점 뱡향을 설정합니다.
backface-visibility backface-visibility: hidden; 선택한 요소의 3D 뒷면의 배경 유무를 설정합니다.

Sample01-translate

translate01
translate02
translate03
translate04
.translate01 {transform: translate(10px, 10px); }
.translate02 {transform: translate(20px, 20px); }
.translate03 {transform: translate(30px, 30px); }
.translate04 {transform: translate(40px, 40px); }

Sample02-translateX

translate05
translate06
translate07
translate08
.translate05 {transform: translateX(10px); }
.translate06 {transform: translateX(20px); }
.translate07 {transform: translateX(30px); }
.translate08 {transform: translateX(40px); }

Sample03-translateY

translate09
translate10
translate11
translate12
.translate09 {transform: translateY(10px); }
.translate10 {transform: translateY(20px); }
.translate11 {transform: translateY(30px); }
.translate12 {transform: translateY(40px); }

Sample04-translateZ

translate13
translate14
translate015
translate16
.translate13 {transform:translateZ(10px); opacity: .6;}
.translate14 {transform:translateZ(40px); opacity: .6;}
.translate15 {transform:translateZ(80px); opacity: .6;}
.translate16 {transform:translateZ(120px); opacity: .6;}

Sample05-scale 확대

scale1
scale2
scale3
scale4
.scale1 {transform: scale(1.1, 1.1); opacity: .6;  }
.scale2 {transform: scale(1.2, 1.2); opacity: .6;  }
.scale3 {transform: scale(1.3, 1.3); opacity: .6;  }
.scale4 {transform: scale(1.4, 1.4); opacity: .6;  }

Sample06-scale 축소

scale5
scale6
scale7
scale8
.scale5 {transform: scale(0.9, 0.9); opacity: .6; }
.scale6 {transform: scale(0.8, 0.8); opacity: .6; }
.scale7 {transform: scale(0.7, 0.7); opacity: .6; }
.scale8 {transform: scale(0.6, 0.6); opacity: .6; }

Sample07-scaleX

scale9
scale10
scale11
scale12
.scale9  {transform: scaleX(1.1); opacity: .6;}
.scale10 {transform: scaleX(1.2); opacity: .6;}
.scale11 {transform: scaleX(1.3); opacity: .6;}
.scale12 {transform: scaleX(1.4); opacity: .6;}

Sample08-scaleY

scale13
scale14
scale15
scale16
.scale13  {transform: scaleY(1.1); opacity: .6;}
.scale14 {transform: scaleY(1.2); opacity: .6;}
.scale15 {transform: scaleY(1.3); opacity: .6;}
.scale16 {transform: scaleY(1.4); opacity: .6;}

Sample09-rotate

rotate1
rotate2
rotate3
rotate4
.rotate1 {transform: rotate(10deg);  }
.rotate2 {transform: rotate(20deg);  }
.rotate3 {transform: rotate(30deg);  }
.rotate4 {transform: rotate(40deg);  }

Sample10-rotateY

rotate5
rotate6
rotate7
rotate8
.rotate5 {transform: rotateY(10deg);  }
.rotate6 {transform: rotateY(20deg);  }
.rotate7 {transform: rotateY(30deg);  }
.rotate8 {transform: rotateY(40deg);  }

Sample11-rotate3d

rotate9
rotate10
rotate11
rotate12
.rotate9 {transform: rotate3d(0,1,1,10deg); }
.rotate10 {transform: rotate3d(0,1,1,20deg); }
.rotate11 {transform: rotate3d(0,1,1,30deg); }
.rotate12 {transform: rotate3d(0,1,1,40deg); }

Sample12-skew

skew1
skew2
skew3
skew4
.skew1 {transform: skew(10deg,10deg); }
.skew2 {transform: skew(20deg,20deg); }
.skew3 {transform: skew(30deg,30deg); }
.skew4 {transform: skew(40deg,40deg); }

Sample13-skewX

skew5
skew6
skew7
skew8
.skew5 {transform: skewX(10deg); }
.skew6 {transform: skewX(20deg); }
.skew7 {transform: skewX(40deg); }
.skew8 {transform: skewX(50deg); }

Sample14-skewY

skew9
skew10
skew11
skew12
.skew9  {transform: skewY(10deg); }
.skew10 {transform: skewY(20deg); }
.skew11 {transform: skewY(30deg); }
.skew12 {transform: skewY(40deg); }

Sample15-transform-origin

origin1
origin2
origin3
origin4
origin5
origin6
origin7
origin8
.origin1 {transform: rotate(10deg); transform-origin: 100% 0; }
.origin2 {transform: rotate(20deg); transform-origin: 100% 0; }
.origin3 {transform: rotate(30deg); transform-origin: 100% 0; }
.origin4 {transform: rotate(40deg); transform-origin: 100% 0; }

.origin5 {transform: rotate(10deg); transform-origin: 0 100%; }
.origin6 {transform: rotate(20deg); transform-origin: 0 100%; }
.origin7 {transform: rotate(30deg); transform-origin: 0 100%; }
.origin8 {transform: rotate(40deg); transform-origin: 0 100%; }

Sample16-transform-origin

origin9
origin10
origin11
origin12
.origin9  {transform: rotate3d(1,0,0,60deg); transform-origin:  20% 0; }
.origin10 {transform: rotate3d(1,0,0,60deg); transform-origin:  20% 30%; }
.origin11 {transform: rotate3d(1,0,0,60deg); transform-origin:  20% 60%; }
.origin12 {transform: rotate3d(1,0,0,60deg); transform-origin:  20% 100%; }

Sample17-transform-origin

origin13
origin14
origin15
origin16
origin17
origin18
origin19
origin20
.origin13 {transform: rotate3d(0,1,0,10deg); transform-origin: right;}
.origin14 {transform: rotate3d(0,1,0,20deg); transform-origin: right;}
.origin15 {transform: rotate3d(0,1,0,30deg); transform-origin: right;}
.origin16 {transform: rotate3d(0,1,0,40deg); transform-origin: right;}

.origin17 {transform: rotate3d(0,1,0,-10deg); transform-origin: right;}
.origin18 {transform: rotate3d(0,1,0,-20deg); transform-origin: right;}
.origin19 {transform: rotate3d(0,1,0,-30deg); transform-origin: right;}
.origin20 {transform: rotate3d(0,1,0,-40deg); transform-origin: right;}