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: scale(2) 선택한 요소의 X축 확대를 설정합니다.
scaleY() transform: scale(2) 선택한 요소의 Y축 확대를 설정합니다.
scaleZ() transform: scale(2) 선택한 요소의 Z축 확대를 설정합니다.
rotate rotate() transform: rotate(10px, 20px) 선택한 요소의 X축과 Y축 회전을 설정합니다.
rotate3d() transform: rotate3d(10px, 20px, 30px) 선택한 요소의 X축, Y축, Z축 회전을 설정합니다.
rotateX() transform: rotateX(10px) 선택한 요소의 X축 회전을 설정합니다.
rotateY() transform: rotateY(10px) 선택한 요소의 Y축 회전을 설정합니다.
rotateZ() transform: rotateZ(10px) 선택한 요소의 Z축 회전을 설정합니다.
skew skew() transform: rotate(10px, 20px) 선택한 요소의 X축과 Y축 기울기를 설정합니다.
skewX() transform: skewX((10px) 선택한 요소의 X축 기울기를 설정합니다.
skewY() transform: skewY(10px) 선택한 요소의 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;(2, 2) 선택한 요소의 3D 뒷면의 배경 유무를 설정합니다.

Sample1 - translate

translater01
translater02
translater03
translater04
translater05
.box {perspective: 500px;}
.box > div {transition: all 0.2s ease;}
.box > div:hover {transform: none;}

.box.tra1 > div {background-image: linear-gradient(to top, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%#f3a469 87%, #f7c978 100%);}
.translate1 {transform: translate(10px, 10px);}
.translate2 {transform: translate(15px, 15px);}
.translate3 {transform: translate(20px, 20px);}
.translate4 {transform: translate(25px, 25px);}
.translate5 {transform: translate(30px, 30px);}

Sample2 - translateX

translater06
translater07
translater08
translater09
translater10
.translate6 {transform: translateX(10px);}
.translate7 {transform: translateX(15px);}
.translate8 {transform: translateX(20px);}
.translate9 {transform: translateX(25px);}
.translate10 {transform: translateX(30px);}

Sample3 - translateY

translater11
translater12
translater13
translater14
translater15
.translate11 {transform: translateY(10px);}
.translate12 {transform: translateY(15px);}
.translate13 {transform: translateY(20px);}
.translate14 {transform: translateY(25px);}
.translate15 {transform: translateY(30px);}

Sample4 - translateZ

translater16
translater17
translater18
translater19
translater20
.translate16 {transform: translateZ(10px); opacity: 6;}
.translate17 {transform: translateZ(30px); opacity: 6;}
.translate18 {transform: translateZ(50px); opacity: 6;}
.translate19 {transform: translateZ(70px); opacity: 6;}
.translate20 {transform: translateZ(90px); opacity: 6;}

Sample5 - scale

scale01
scale02
scale03
scale04
scale05
.box.sca1 > div {background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);}

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

Sample6 - scale

scale06
scale07
scale08
scale09
scale10
.scale6 {transform: scale(0.9, 0.9); opacity: 0.6;}
.scale7 {transform: scale(0.8, 0.8); opacity: 0.6;}
.scale8 {transform: scale(0.7, 0.7); opacity: 0.6;}
.scale9 {transform: scale(0.6, 0.6); opacity: 0.6;}
.scale10 {transform: scale(0.5, 0.5); opacity: 0.6;}

Sample7 - scaleX

scale11
scale12
scale13
scale14
scale15
.scale11 {transform: scaleX(1.1); opacity: 0.6;}
.scale12 {transform: scaleX(1.2); opacity: 0.6;}
.scale13 {transform: scaleX(1.3); opacity: 0.6;}
.scale14 {transform: scaleX(1.4); opacity: 0.6;}
.scale15 {transform: scaleX(1.5); opacity: 0.6;}

Sample8 - scaleY

scale16
scale17
scale18
scale19
scale20
.scale16 {transform: scaleY(1.1); opacity: 0.6;}
.scale17 {transform: scaleY(1.2); opacity: 0.6;}
.scale18 {transform: scaleY(1.3); opacity: 0.6;}
.scale19 {transform: scaleY(1.4); opacity: 0.6;}
.scale20 {transform: scaleY(1.5); opacity: 0.6;}

Sample9 - rotate

rotate01
rotate02
rotate03
rotate04
rotate05
.box.rot1 > div {background-image: linear-gradient(-45deg, #FFC796 0%, #FF6B95 100%);}

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

Sample10 - rotateX

rotate06
rotate07
rotate08
rotate09
rotate10
.rotate6 {transform: rotateX(10deg);}
.rotate7 {transform: rotateX(20deg);}
.rotate8 {transform: rotateX(30deg);}
.rotate9 {transform: rotateX(40deg);}
.rotate10 {transform: rotateX(50deg);}

Sample11 - rotateY

rotate11
rotate12
rotate13
rotate14
rotate15
.rotate11 {transform: rotateY(10deg);}
.rotate12 {transform: rotateY(20deg);}
.rotate13 {transform: rotateY(30deg);}
.rotate14 {transform: rotateY(40deg);}
.rotate15 {transform: rotateY(50deg);}

Sample12 - rotate3d

rotate16
rotate17
rotate18
rotate19
rotate20
.rotate16 {transform: rotate3d(0, 1, 1, 10deg);}
.rotate17 {transform: rotate3d(0, 1, 1, 30deg);}
.rotate18 {transform: rotate3d(0, 1, 1, 50deg);}
.rotate19 {transform: rotate3d(0, 1, 1, 70deg);}
.rotate20 {transform: rotate3d(0, 1, 1, 90deg);}

Sample13 - skew

skew01
skew02
skew03
skew04
skew05
.box.skw1 > div {background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);}

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

Sample14 - skewX

skew06
skew07
skew08
skew09
skew10
.skew6 {transform: skewX(10deg);}
.skew7 {transform: skewX(15deg);}
.skew8 {transform: skewX(20deg);}
.skew9 {transform: skewX(25deg);}
.skew10 {transform: skewX(30deg);}

Sample15 - skewY

skew11
skew12
skew13
skew14
skew15
.skew11 {transform: skewY(10deg);}
.skew12 {transform: skewY(15deg);}
.skew13 {transform: skewY(20deg);}
.skew14 {transform: skewY(25deg);}
.skew15 {transform: skewY(30deg);}

Sample16 - origin

origin01
origin02
origin03
origin04
origin05
origin06
origin07
origin08
origin09
origin10
.sBox.v3 > div {width: 90px; height: 90px; line-height: 90px; margin: 36px;}
.box.org1 > div {background-image: linear-gradient(to top, #b224ef 0%, #7579ff 100%);}

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

Sample17 - origin

origin11
origin12
origin13
origin14
origin15
origin16
origin17
origin18
origin19
origin20
.origin11 {transform: rotate(10deg); transform-origin: 100% 0;}
.origin12 {transform: rotate(15deg); transform-origin: 100% 0;}
.origin13 {transform: rotate(20deg); transform-origin: 100% 0;}
.origin14 {transform: rotate(25deg); transform-origin: 100% 0;}
.origin15 {transform: rotate(30deg); transform-origin: 100% 0;}
.origin16 {transform: rotate(10deg); transform-origin: 0% 100%;}
.origin17 {transform: rotate(15deg); transform-origin: 0% 100%;}
.origin18 {transform: rotate(20deg); transform-origin: 0% 100%;}
.origin19 {transform: rotate(25deg); transform-origin: 0% 100%;}
.origin20 {transform: rotate(30deg); transform-origin: 0% 100%;}

Sample18 - origin

origin21
origin22
origin23
origin24
origin25
.origin21 {transform: rotate3d(1, 0, 0, 60deg); transform-origin: 20% 0;}
.origin22 {transform: rotate3d(1, 0, 0, 60deg); transform-origin: 20% 25%;}
.origin23 {transform: rotate3d(1, 0, 0, 60deg); transform-origin: 20% 50%;}
.origin24 {transform: rotate3d(1, 0, 0, 60deg); transform-origin: 20% 75%;}
.origin25 {transform: rotate3d(1, 0, 0, 60deg); transform-origin: 20% 100;}

Sample19 - origin

origin26
origin27
origin28
origin29
origin30
.origin26 {transform: rotate3d(0, 1, 0, 10deg); transform-origin: right;}
.origin27 {transform: rotate3d(0, 1, 0, 20deg); transform-origin: right;}
.origin28 {transform: rotate3d(0, 1, 0, 30deg); transform-origin: right;}
.origin29 {transform: rotate3d(0, 1, 0, 40deg); transform-origin: right;}
.origin30 {transform: rotate3d(0, 1, 0, 50deg); transform-origin: right;}

Sample20 - origin

origin31
origin32
origin33
origin34
origin35
.origin31 {transform: rotate3d(0, 1, 0, -10deg); transform-origin: right;}
.origin32 {transform: rotate3d(0, 1, 0, -20deg); transform-origin: right;}
.origin33 {transform: rotate3d(0, 1, 0, -30deg); transform-origin: right;}
.origin34 {transform: rotate3d(0, 1, 0, -40deg); transform-origin: right;}
.origin35 {transform: rotate3d(0, 1, 0, -50deg); transform-origin: right;}