| Property | 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:translateY(10px); | 선택한 요소의 Z좌표 이동을 나타냅니다. |
| Property | 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축 확대를 나타냅니다. |
| Property | 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축 회전을 나타냅니다. |
| Property | Sample | Description |
|---|---|---|
| skew | transform:skew(10deg,10deg); | 선택한 요소의 X축, Y축 기울기를 나타냅니다. |
| skewX | transform:X(10deg); | 선택한 요소의 X축 기울기를 나타냅니다. |
| skewY | transform:skewY(10deg); | 선택한 요소의 Y축 기울기를 나타냅니다. |
| Property | 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 요소 뒷면의 배경 유무를 설정합니다. |
See the Pen Peeled Text Transforms by Michiel Bijl (@Michiel) on CodePen.
See the Pen Transformations 3D CSS3 by crazorus (@crazorus) on CodePen.
See the Pen Change transformation-origin mid animation by Zach Saucier (@Zeaklous) on CodePen.
See the Pen Social swatchbook by Hugo Giraudel (@HugoGiraudel) on CodePen.
See the Pen iPad 3D by Emmanuel Pilande (@epilande) on CodePen.