728x90
반응형
GSAP 제공하는 Style 트윈 기본 문법
CSS Style과 동일하게 gsap에 내장된 Style 변경 방법입니다.
장점은 CSS Style 보다 코드가 좀 간편합니다.
GSAP에서 제공하는 Style과 CSS Style의 문법 차이를 아래와 같이 간단하게 정리해 보겠습니다.
| GSAP | CSS |
| x:300 | transform: translateX(300px), margin-left: 300px |
| y:300 | transform: translateY(300px), margin-top: 300px |
| scaleX:2 | transfome: scaleX(2) |
| scaleY:2 | transfome: scaleY(2) |
| rotation:360 | transform: rotate(360deg) |
| rotationX:180 | transform: rotateX(180deg) |
| rotationY:180 | transform: rotateY(180deg) |
| skewY:45 | transform: skewY(45deg) |
| xPercent:45 | transform: translateX(45%) |
| yPercent:45 | transform: translateY(45%) |
728x90
반응형
'coding' 카테고리의 다른 글
| SRT 예매 매크로 - 크롬 확장 프로그램 (3) | 2023.09.08 |
|---|---|
| 조건에 따른 SELECT문 활용 (0) | 2023.08.24 |
| firebase + 리액트 배포 (0) | 2023.08.14 |
| git 설치하기 (0) | 2023.08.14 |
| Git - Commit Message Convention (0) | 2023.08.02 |
