변환(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 뒷면의 배경 유무를 설정합니다. |
.translate01 {transform: translate(10px, 10px)}
.translate02 {transform: translate(15px, 15px)}
.translate03 {transform: translate(20px, 20px)}
.translate04 {transform: translate(25px, 25px)}
.translate05 {transform: translate(30px, 30px)}
.translate06 {transform: translateX(10px)}
.translate07 {transform: translateX(15px)}
.translate08 {transform: translateX(20px)}
.translate09 {transform: translateX(25px)}
.translate10 {transform: translateX(30px)}
.translate11 {transform: translateY(10px)}
.translate12 {transform: translateY(15px)}
.translate13 {transform: translateY(20px)}
.translate14 {transform: translateY(25px)}
.translate15 {transform: translateY(30px)}
.translate16 {transform: translateZ(10px);}
.translate17 {transform: translateZ(15px);}
.translate18 {transform: translateZ(20px);}
.translate19 {transform: translateZ(25px);}
.translate20 {transform: translateZ(30px);}
.scale01 {transform: scale(1.05, 1.05); opacity: 0.7;}
.scale02 {transform: scale(1.1, 1.1); opacity: 0.7;}
.scale03 {transform: scale(1.15, 1.15); opacity: 0.7;}
.scale04 {transform: scale(1.2, 1.2); opacity: 0.7;}
.scale05 {transform: scale(1.25, 1.25); opacity: 0.7;}
.scale06 {transform: scale(0.9, 0.9); opacity: 0.7;}
.scale07 {transform: scale(0.8, 0.8); opacity: 0.7;}
.scale08 {transform: scale(0.7, 0.7); opacity: 0.7;}
.scale09 {transform: scale(0.6, 0.6); opacity: 0.7;}
.scale10 {transform: scale(0.5, 0.5); opacity: 0.7;}
.scale11 {transform: scaleX(1.05); opacity: 0.7;}
.scale12 {transform: scaleX(1.1); opacity: 0.7;}
.scale13 {transform: scaleX(1.15); opacity: 0.7;}
.scale14 {transform: scaleX(1.2); opacity: 0.7;}
.scale15 {transform: scaleX(1.25); opacity: 0.7;}
.scale16 {transform: scaleY(1.05); opacity: 0.7;}
.scale17 {transform: scaleY(1.1); opacity: 0.7;}
.scale18 {transform: scaleY(1.15); opacity: 0.7;}
.scale19 {transform: scaleY(1.2); opacity: 0.7;}
.scale20 {transform: scaleY(1.25); opacity: 0.7;}
.rotate01 {transform: rotate(10deg);}
.rotate02 {transform: rotate(20deg);}
.rotate03 {transform: rotate(30deg);}
.rotate04 {transform: rotate(40deg);}
.rotate05 {transform: rotate(50deg);}
.rotate06 {transform: rotateX(10deg);}
.rotate07 {transform: rotateX(20deg);}
.rotate08 {transform: rotateX(30deg);}
.rotate09 {transform: rotateX(40deg);}
.rotate10 {transform: rotateX(50deg);}
.rotate11 {transform: rotateY(10deg);}
.rotate12 {transform: rotateY(20deg);}
.rotate13 {transform: rotateY(30deg);}
.rotate14 {transform: rotateY(40deg);}
.rotate15 {transform: rotateY(50deg);}
..rotate16 {transform: rotate3d(0,1,1,15deg);}
.rotate17 {transform: rotate3d(0,1,1,25deg);}
.rotate18 {transform: rotate3d(0,1,1,40deg);}
.rotate19 {transform: rotate3d(0,1,1,55deg);}
.rotate20 {transform: rotate3d(0,1,1,70deg);}
.skew01 {transform: skew(5deg, 5deg);}
.skew02 {transform: skew(10deg, 10deg);}
.skew03 {transform: skew(15deg, 15deg);}
.skew04 {transform: skew(20deg, 20deg);}
.skew05 {transform: skew(25deg, 25deg);}
.skew06 {transform: skewX(5deg);}
.skew07 {transform: skewX(10deg);}
.skew08 {transform: skewX(15deg);}
.skew09 {transform: skewX(20deg);}
.skew10 {transform: skewX(25deg);}
.skew11 {transform: skewY(5deg);}
.skew12 {transform: skewY(10deg);}
.skew13 {transform: skewY(15deg);}
.skew14 {transform: skewY(20deg);}
.skew15 {transform: skewY(25deg);}
.origin01 {transform: rotate(10deg); transform-origin: 100% 0;}
.origin02 {transform: rotate(15deg); transform-origin: 100% 0;}
.origin03 {transform: rotate(20deg); transform-origin: 100% 0;}
.origin04 {transform: rotate(25deg); transform-origin: 100% 0;}
.origin05 {transform: rotate(30deg); transform-origin: 100% 0;}
.origin06 {transform: rotate(10deg); transform-origin: 0 100%;}
.origin07 {transform: rotate(15deg); transform-origin: 0 100%;}
.origin08 {transform: rotate(20deg); transform-origin: 0 100%;}
.origin09 {transform: rotate(25deg); transform-origin: 0 100%;}
.origin10 {transform: rotate(30deg); transform-origin: 0 100%;}
.origin11 {transform: rotate3d(0,1,0,10deg); transform-origin: 100% 0;}
.origin12 {transform: rotate3d(0,1,0,15deg); transform-origin: 100% 0;}
.origin13 {transform: rotate3d(0,1,0,20deg); transform-origin: 100% 0;}
.origin14 {transform: rotate3d(0,1,0,25deg); transform-origin: 100% 0;}
.origin15 {transform: rotate3d(0,1,0,30deg); transform-origin: 100% 0;}
.origin16 {transform: rotate3d(0,1,0,35deg); transform-origin: 0 100%;}
.origin17 {transform: rotate3d(0,1,0,40deg); transform-origin: 0 100%;}
.origin18 {transform: rotate3d(0,1,0,45deg); transform-origin: 0 100%;}
.origin19 {transform: rotate3d(0,1,0,50deg); transform-origin: 0 100%;}
.origin20 {transform: rotate3d(0,1,0,55deg); transform-origin: 0 100%;}