WEB animation & effect/product card
3D CSS Card Design : tilt.js & preserve-3d
SeaPlus
2021. 10. 6. 10:13
[구현]
1. Card 요소들을 3D 로 구현한다.
[transform-style]
3D공간에서 변경된 3차원 좌표를 하위 자식요소에게 전달할 것인지의 여부를 결정하는 속성
| flat | 하위요소들은 상위요소늬 3D좌표와 상관없이 2D영역에 표시된다. |
| preserve-3d | 부모요소의 3D 좌표를 전달받아 3D 형태로 표현된다. |
자식요소 중 3D로 표현하고싶은 요소가 있다면 부모요소는 반드시 "preserve-3d" 를 이용해야 한다!!
[translate3d]
- 3d로 표현하기 위해 현재 위치에서 해당 요소를 주어진 x축, y축 , z축 의 거리만큼 이동시킨다.
- perpective(): 메소드를 사용하여 원근감을 표현가능하다.
transform: perspective(500px) translate3d(0, 0, 75px);
2. Tilt.js 라이브러리 사용
Vanilla-tilt.js (micku7zu.github.io)
Vanilla-tilt.js
Tilt change event The tilt change event wil output the x,y & percentages of tilting. let eventBox = document.querySelector("#box-event"); let outputContainer = document.querySelector(".output"); VanillaTilt.init(eventBox); eventBox.addEventListener("tiltCh
micku7zu.github.io
tilt.js 라이브러리는 요소에서 마우스 움직임에 따라 변하는 3D 틸트 효과를 부여한다.
1.71kb로 가볍고 사용법도 간단하다.
[Tilt.js 옵션]
| maxTilt: 20 | 최대로 tilt 되는 크기 |
| perspective: 1000 | 값이 낮을수록 원근감이 증가한다. |
| scale: 1 | 배율, 1 = 100%, 2 = 200% |
| speed: 300 | 값이 낮을수록 더 빠르게 변한다. |
| disableAxis: null | 해당 축을 비활성화한다. 'null', 'x', 'y' |
| reset: true | 마우스가 벗어나도 틸트를 유지한다. |
| glare: false | 글레어효과를 사용한다. |
| maxGlare: 1 | 글레어효과 강도 0-1 |
참고:
http://tcpschool.com/css/css3_transform_3Dtransform
https://seulbinim.github.io/WSA/transform.html#transform-origin-%EC%86%8D%EC%84%B1