소개
transform은 엘리먼트의 크기, 위치, 모양을 변경하는 속성입니다.
형식
transform은 아래와 같은 형식이 올 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | /* Keyword values */transform: none;/* Function values */transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);transform: translate(12px, 50%);transform: translateX(2em);transform: translateY(3in);transform: scale(2, 0.5);transform: scaleX(2);transform: scaleY(0.5);transform: rotate(0.5turn);transform: skew(30deg, 20deg);transform: skewX(30deg);transform: skewY(1.07rad);transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);transform: translate3d(12px, 50%, 3em);transform: translateZ(2px);transform: scale3d(2.5, 1.2, 0.3);transform: scaleZ(0.3);transform: rotate3d(1, 2.0, 3.0, 10deg);transform: rotateX(10deg);transform: rotateY(10deg);transform: rotateZ(10deg);transform: perspective(17px);/* Multiple function values */transform: translateX(10px) rotate(10deg) translateY(5px);/* Global values */transform: inherit;transform: initial;transform: unset; |
참고
- Caniuse (트랜스폼을 현재 얼마나 많은 브라우저가 지원하고 있는지
- mdn transform
- hover.css
- CSShake
- magic animation
