Genie of the Lamp 😶‍🌫️ Genie of the Lamp 😶‍🌫️

꽃이 흔들거리는 효과

• [CSS, JS] 꽃이 흔들거리는 효과 구현하기

  Coding 2023. 5. 19. 11:21

  꽃이 바람에 흔들거리는 애니메이션을 CSS 버전과 JS 버전으로 각각 구현해 비교해보려고 합니다. 먼저 꽃 이미지를 불러옵니다. - CSS Ver. img.flower { transform-origin: center bottom; // rotate 기준을 bottom 으로 } transform-origin은 transform 속성을 사용할 때 사용한다. 초기값은 center로 transform-origin: 50% 50%;이다. transform을 사용할 요소의 기준점을 정한다. 꽃이 흔들거리는 걸 표현하려면 X는 center(50%) Y는 bottom (100%) 이어야 원하는 모양으로 나온다. | 참고 자료 | transform-origin - CSS: Cascading..

  Read More