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
.translate01 {transform: translate(10px, 10px);}
.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
translate15
translate16
.translate13 {transform: translateZ(10px); opacity: .6;}
.translate14 {transform: translateZ(40px); opacity: .6;}
.translate15 {transform: translateZ(70px); opacity: .6;}
.translate16 {transform: translateZ(80px); 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
.scale9{transform: scaleY(1.1); opacity: .6;}
.scale10{transform: scaleY(1.2); opacity: .6;}
.scale11{transform: scaleY(1.3),; opacity: .6;}
.scale12{transform: scaleY(1.4); opacity: .6;}
Sample09 - rotate
rotate1
rotate2
rotate3
rotate4
.scale9{transform: scaleY(1.1); opacity: .6;}
.scale10{transform: scaleY(1.2); opacity: .6;}
.scale11{transform: scaleY(1.3),; opacity: .6;}
.scale12{transform: scaleY(1.4); opacity: .6;}
Sample010 - rotateX
rotate5
rotate6
rotate7
rotate8
.rotate5{transform: rotateX(10deg); opacity: .6;}
.rotate6{transform: rotateX(20deg); opacity: .6;}
.rotate7{transform: rotateX(30deg); opacity: .6;}
.rotate8{transform: rotateX(40deg); opacity: .6;}
Sample11 - rotateY
rotate9
rotate10
rotate11
rotate12
.scale9{transform: scaleY(1.1); opacity: .6;}
.scale10{transform: scaleY(1.2); opacity: .6;}
.scale11{transform: scaleY(1.3),; opacity: .6;}
.scale12{transform: scaleY(1.4); opacity: .6;}
Sample12 - rotate3d
rotate13
rotate14
rotate15
rotate16
.rotate13{transform: rotate3d(0,1,1,10deg);}
.rotate14{transform: rotate3d(0,1,1,30deg);}
.rotate15{transform: rotate3d(0,1,1,50deg);}
.rotate16{transform: rotate3d(0,1,1,70deg);}
Sample13 - skew
skew1
skew2
skew3
skew4
.skew1{transform: skew(10deg, 10deg); opacity: .6;}
.skew2{transform: skew(20deg, 20deg); opacity: .6;}
.skew3{transform: skew(30deg, 30deg); opacity: .6;}
.skew4{transform: skew(40deg, 40deg); opacity: .6;}
Sample14 - skewX
skew5
skew6
skew7
skew8
.skew5{transform: skewX(10deg);}
.skew6{transform: skewX(20deg);}
.skew7{transform: skewX(30deg);}
.skew8{transform: skewX(40deg);}
Sample15 - skewY
skew9
skew10
skew11
skew12
.skew9{transform: skewY(10deg);}
.skew10{transform: skewY(20deg);}
.skew11{transform: skewY(30deg);}
.skew12{transform: skewY(40deg);}
Sample16 - transform-origin X100%
origin1
origin2
origin3
origin4
.origin1{transform: rotate(10deg); transform-origin: 100% 0}
.origin2{transform: rotate(10deg); transform-origin: 100% 0}
.origin3{transform: rotate(10deg); transform-origin: 100% 0}
.origin4{transform: rotate(10deg); transform-origin: 100% 0}
Sample17 - transform-origin Y100%
origin5
origin6
origin7
origin8
.origin5{transform: rotate(10deg); transform-origin:0 100%}
.origin6{transform: rotate(10deg); transform-origin:0 100%}
.origin7{transform: rotate(10deg); transform-origin:0 100%}
.origin8{transform: rotate(10deg); transform-origin:0 100%}
Sample18 - originX,Y
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%;}
Sample19 - transform-rotate3d+origin right
origin13
origin14
origin15
origin16
.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;}
Sample20 - transform-rotate3d+origin left
origin17
origin18
origin19
origin20
.origin17{transform: rotate3d(0 ,1, 0, -10deg); transform-origin: left;}
.origin18{transform: rotate3d(0, 1, 0, -20deg); transform-origin: left;}
.origin19{transform: rotate3d(0, 1, 0, -30deg); transform-origin: left;}
.origin20{transform: rotate3d(0, 1, 0, -40deg); transform-origin: left;}