Notice
Recent Posts
Recent Comments
Link
drexqq
[CSS] transform 본문
728x90
반응형
Transform
변환은 엘리먼트의 좌표를 조작하여 위치나 크기, 회적 각도 등을 변경하는 기법입니다. 변환함수는 이동(translate), 확대(scale), 회전(rotate), 기울이기(skew) 등의 주용 4가지 함수와 행렬변환, 원근변환이 있습니다.
이동(translate) | 확대(scale) | 회전(rotate) | 기울이기(skew) | |
---|---|---|---|---|
2d변환 | translate(x,y) | scale(x,y) | rotate(angle) | skew(x-angle,y-angle) |
3d변환 | translate3d(x,y,z) | scale3d(x,y,z) | rotate3d(ax,y,z,angle) | |
x축 변환 | translateX(x) | scaleX(x) | rotateX(angle) | skewX(angle) |
y축 변환 | translateY(y) | scaleY(y) | rotateY(angle) | skewY(angle) |
z축 변환 | translateZ(z) | scaleZ(z) | rotateZ(angle) |
translate
Porperty | Sample | Description |
---|---|---|
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좌표 이동을 나타냅니다. |
translate1
translate2
translate3
translate4
translate5
.translate1 {transform: translate(10px, 10px);} .translate2 {transform: translate(20px, 20px);} .translate3 {transform: translate(30px, 30px);} .translate4 {transform: translate(40px, 40px);} .translate5 {transform: translate(50px, 50px);}
translate6
translate7
translate8
translate9
translate10
.translate6 {transform: translateX(10px);} .translate7 {transform: translateX(20px);} .translate8 {transform: translateX(30px);} .translate9 {transform: translateX(40px);} .translate10 {transform: translateX(50px);}
translate11
translate12
translate13
translate14
translate15
.translate11 {transform: translateY(10px);} .translate12 {transform: translateY(20px);} .translate13 {transform: translateY(30px);} .translate14 {transform: translateY(40px);} .translate15 {transform: translateY(50px);}
translate16
translate17
translate18
translate19
translate20
.translate16 {transform: translateZ(10px);} .translate17 {transform: translateZ(20px);} .translate18 {transform: translateZ(30px);} .translate19 {transform: translateZ(40px);} .translate20 {transform: translateZ(50px);}
translate21
translate22
translate23
translate24
translate25
.translate21 {transform: translateZ(-10px);} .translate22 {transform: translateZ(-20px);} .translate23 {transform: translateZ(-30px);} .translate24 {transform: translateZ(-40px);} .translate25 {transform: translateZ(-50px);}
scale
Porperty | Sample | Description |
---|---|---|
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축 확대를 나타냅니다. |
scale1
scale2
scale3
scale4
scale5
.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);}
scale6
scale7
scale8
scale9
scale10
.scale6 {transform: scale(0.9,0.9);} .scale7 {transform: scale(0.8,0.8);} .scale8 {transform: scale(0.7,0.7);} .scale9 {transform: scale(0.6,0.6);} .scale10 {transform: scale(0.5,0.5);}
scale11
scale12
scale13
scale14
scale15
.scale11 {transform: scaleX(1.1);} .scale12 {transform: scaleX(1.2);} .scale13 {transform: scaleX(1.3);} .scale14 {transform: scaleX(1.4);} .scale15 {transform: scaleX(1.5);}
scale16
scale17
scale18
scale19
scale20
.scale16 {transform: scaleY(1.1);} .scale17 {transform: scaleY(1.2);} .scale18 {transform: scaleY(1.3);} .scale19 {transform: scaleY(1.4);} .scale20 {transform: scaleY(1.5);}
rotate
Porperty | Sample | Description |
---|---|---|
rotate | transform: rotate(10deg); | 선택한 요소의 회전을 나타냅니다. |
rotate3d | transform: rotate3d(0, 1, 0, 10deg); | 선택한 요소의 3d회전을 나타냅니다. |
rotateX | transform: rotateX(10deg); | 선택한 요소의 X축 회전을 나타냅니다. |
rotateY | transform: rotateY(10deg); | 선택한 요소의 Y축 회전을 나타냅니다. |
rotateZ | transform: rotateZ(10deg); | 선택한 요소의 Z축 회전을 나타냅니다. |
rotate1
rotate2
rotate3
rotate4
rotate5
.rotate1 {transform: rotate(10deg);} .rotate2 {transform: rotate(20deg);} .rotate3 {transform: rotate(30deg);} .rotate4 {transform: rotate(40deg);} .rotate5 {transform: rotate(50deg);}
rotate6
rotate7
rotate8
rotate9
rotate10
.rotate6 {transform: rotateX(10deg);} .rotate7 {transform: rotateX(20deg);} .rotate8 {transform: rotateX(30deg);} .rotate9 {transform: rotateX(40deg);} .rotate10 {transform: rotateX(50deg);}
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);}
rotate16
rotate17
rotate18
rotate19
rotate20
.rotate16 {transform: rotateZ(10deg);} .rotate17 {transform: rotateZ(20deg);} .rotate18 {transform: rotateZ(30deg);} .rotate19 {transform: rotateZ(40deg);} .rotate20 {transform: rotateZ(50deg);}
rotate21
rotate22
rotate23
rotate24
rotate25
.rotate21 {transform: rotate3d(0,1,1,10deg);} .rotate22 {transform: rotate3d(0,1,1,30deg);} .rotate23 {transform: rotate3d(0,1,1,50deg);} .rotate24 {transform: rotate3d(0,1,1,70deg);} .rotate25 {transform: rotate3d(0,1,1,90deg);}
skew
Porperty | Sample | Description |
---|---|---|
skew | transform: skew(10deg, 10deg); | 선택한 요소의 X축, Y축 기울기를 나타냅니다. |
skewX | transform: skewX(10deg); | 선택한 요소의 X축 기울기를 나타냅니다. |
skewY | transform: skewY(10deg); | 선택한 요소의 Y축 기울기를 나타냅니다. |
rotateZ | transform: rotateZ(10deg); | 선택한 요소의 Z축 회전을 나타냅니다. |
skew1
skew2
skew3
skew4
skew5
skew6
skew7
skew8
skew9
skew10
skew11
skew12
skew13
skew14
skew15
transform-origin
Porperty | Sample | Description |
---|---|---|
transform-origin | transform-origin: 20% 30%; | 선택한 요소의 X축, Y축 기준점 나타냅니다. |
transform-style | transform-style: preserve-3d; | 선택한 요소 스타일을 설정합니다. |
perspective | perspective: 500px; | 선택한 요소의 원근점 거리를 설정합니다. |
perspective-origin | perspective-origin: 100px | 선택한 요소의 원근점 방향을 설정합니다. |
backface-visibility | backface-visibility: hidden; | 선택한 요소의 3D 뒷면의 배경 유무를 설정합니다. |
origin1
origin2
origin3
origin4
origin5
.origin1 {transform: rotate(10deg); transform-origin: 0% 0%;} .origin2 {transform: rotate(20deg); transform-origin: 0% 0%;} .origin3 {transform: rotate(30deg); transform-origin: 0% 0%;} .origin4 {transform: rotate(40deg); transform-origin: 0% 0%;} .origin5 {transform: rotate(50deg); transform-origin: 0% 0%;}
origin6
origin7
origin8
origin9
origin10
.origin6 {transform: rotate(10deg); transform-origin: 100% 100%;} .origin7 {transform: rotate(20deg); transform-origin: 100% 100%;} .origin8 {transform: rotate(30deg); transform-origin: 100% 100%;} .origin9 {transform: rotate(40deg); transform-origin: 100% 100%;} .origin10 {transform: rotate(50deg); transform-origin: 100% 100%;}
origin11
origin12
origin13
origin14
origin15
.origin11 {transform: rotate(10deg); transform-origin: 100% 0%;} .origin12 {transform: rotate(20deg); transform-origin: 100% 0%;} .origin13 {transform: rotate(30deg); transform-origin: 100% 0%;} .origin14 {transform: rotate(40deg); transform-origin: 100% 0%;} .origin15 {transform: rotate(50deg); transform-origin: 100% 0%;}
origin16
origin17
origin18
origin19
origin20
.origin16 {transform: rotate(10deg); transform-origin: 0% 100%;} .origin17 {transform: rotate(20deg); transform-origin: 0% 100%;} .origin18 {transform: rotate(30deg); transform-origin: 0% 100%;} .origin19 {transform: rotate(40deg); transform-origin: 0% 100%;} .origin20 {transform: rotate(50deg); transform-origin: 0% 100%;}
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%;}
origin26
origin27
origin28
origin29
origin30
.origin26 {transform: rotate3d(0,1,0,10deg); transform-origin: 100% 100%;} .origin27 {transform: rotate3d(0,1,0,20deg); transform-origin: 100% 100%;} .origin28 {transform: rotate3d(0,1,0,30deg); transform-origin: 100% 100%;} .origin29 {transform: rotate3d(0,1,0,40deg); transform-origin: 100% 100%;} .origin30 {transform: rotate3d(0,1,0,50deg); transform-origin: 100% 100%;}
origin31
origin32
origin33
origin34
origin35
.origin31 {transform: rotate3d(0,1,0,-10deg); transform-origin: 100% 100%} .origin32 {transform: rotate3d(0,1,0,-20deg); transform-origin: 100% 100%} .origin33 {transform: rotate3d(0,1,0,-30deg); transform-origin: 100% 100%} .origin34 {transform: rotate3d(0,1,0,-40deg); transform-origin: 100% 100%} .origin35 {transform: rotate3d(0,1,0,-50deg); transform-origin: 100% 100%}
origin36
origin37
origin38
origin39
origin40
.origin36 {transform: rotate3d(0,1,0,-10deg); transform-origin:100% 100%; } .origin37 {transform: rotate3d(0,1,0,-20deg); transform-origin:100% 100%; } .origin38 {transform: rotate3d(0,1,0,-30deg); transform-origin:100% 100%; } .origin39 {transform: rotate3d(0,1,0,-40deg); transform-origin:100% 100%; } .origin40 {transform: rotate3d(0,1,0,-50deg); transform-origin:100% 100%; }
origin41
origin42
origin43
origin44
origin45
.origin41 {transform: rotate3d(0,1,0,10deg); transform-origin:0% 0%; } .origin42 {transform: rotate3d(0,1,0,20deg); transform-origin:0% 0%; } .origin43 {transform: rotate3d(0,1,0,30deg); transform-origin:0% 0%; } .origin44 {transform: rotate3d(0,1,0,40deg); transform-origin:0% 0%; } .origin45 {transform: rotate3d(0,1,0,50deg); transform-origin:0% 0%; }
origin46
origin47
origin48
origin49
origin50
.origin46 {transform: rotate3d(0,1,0,-10deg); transform-origin:0% 0%; } .origin47 {transform: rotate3d(0,1,0,-20deg); transform-origin:0% 0%; } .origin48 {transform: rotate3d(0,1,0,-30deg); transform-origin:0% 0%; } .origin49 {transform: rotate3d(0,1,0,-40deg); transform-origin:0% 0%; } .origin50 {transform: rotate3d(0,1,0,-50deg); transform-origin:0% 0%; }
See the Pen CSS3 Perspective Playground ✨ by Mehmet Burak Erman 🦌 (@mburakerman) on CodePen.
728x90
반응형
'Front-End > CSS' 카테고리의 다른 글
[CSS] animation (0) | 2020.06.11 |
---|---|
[CSS] blend-effect (0) | 2020.06.11 |
[CSS] background (0) | 2020.06.11 |
[CSS] box-shadow (0) | 2020.06.11 |
[CSS] padding(패딩)과 margin(마진) (0) | 2020.06.11 |
Comments