TailwindCSS를 사용한 시차 호버 효과

카드의 놀라운 3D 시차 호버 효과에 매료된 적이 있나요? 복잡해 보이죠? 글쎄요, 저도 그렇게 생각했는데, CodePen을 만드는 것이 얼마나 쉬운지 보여주는 간단한 CodePen 데모를 접하기 전까지는 말이죠. 당신도 배우고 싶나요? 본격적으로 살펴볼까요-

몇 가지 기본사항

3D 효과를 얻으려면 먼저 몇 가지 사항을 알아야 합니다. 그건-

• 원근감: 관점 속성은 개체가 뷰어로부터 얼마나 멀리 나타나는지 제어합니다. 값이 낮을수록 더욱 강력하고 극적인 3D 효과가 생성되고, 값이 높을수록 효과가 더욱 미묘해집니다.
• 변환: 변형 속성을 사용하면 요소에 2D 또는 3D 변경 사항을 적용할 수 있습니다. 회전, 크기 조정, 이동, 기울이기 등의 작업에 사용할 수 있습니다!

코드로 넘어가자

최종 결과를 먼저 확인하면 우리가 구축하려는 내용을 이해할 수 있습니다. 카드 위로 마우스를 가져가서 어떻게 보이는지 확인해 보세요.

이제 어떻게 작동하는지 살펴보겠습니다. 여기에서는 모든 TailwindCSS 클래스를 설명하지 않겠습니다. 우리는 효과를 발휘하는 주요 클래스에 대해서만 논의할 것입니다. 먼저 메인카드의 div 클래스를 살펴보겠습니다-

<div>



<p>Look at this part here-<br>
</p>

<pre class="brush:php;toolbar:false">[transform:perspective(800px)_rotateY(10deg)] hover:[transform:perspective(800px)_rotateY(-10deg)]

여기서 우리는 두 가지 일을 하고 있습니다. 처음에는 Y축을 기준으로 카드를 10도 회전합니다. 그리고 원근감을 800px로 설정합니다. 결과적으로 카드의 정상적인 상태는 아래 이미지와 같습니다. 오른쪽으로 약간 회전되어 있습니다. 그리고 약간의 원근감을 적용한 결과 카드의 오른쪽이 약간 기울어진 것을 볼 수 있습니다. 이것이 바로 실제 3D 세계가 작동하는 방식입니다!

원근을 조정하여 카드의 변화를 확인할 수 있습니다. 그리고 관점이 어떻게 작동하는지에 대해서도 알게 될 것입니다.

원근감을 100px로 변경하면 이런 모습입니다. 원근값을 낮출수록 내용이 더 가까워집니다. 기억하시나요?

그리고 이것이 원근감을 10000px로 설정하면 얻을 수 있는 결과입니다. 회전이 전혀 없는 것 같을 정도로 지금까지!

이제 마우스를 가져가면 어떻게 3D 환상이 나타나는지 살펴보겠습니다. 그리고 우리의 눈을 속이기 쉽다는 사실에 놀라실 것입니다!

img 코드의 이 부분을 보세요-

<img  alt="TailwindCSS를 사용한 시차 호버 효과" >



<p>카드 위에 마우스를 올리면 이미지가 왼쪽으로 2.5rem 슬라이드되어 역동적인 효과를 연출합니다. 이를 위해 TailwindCSS의 그룹 수정자를 사용하고 있습니다. 그리고 그게 다입니다! 3D 이미지 회전카드를 드립니다.</p>

<p>이제 당신 차례입니다! 이러한 클래스를 실험하고, 관점을 조정하거나, 이 효과를 다른 TailwindCSS 유틸리티와 결합하여 독특한 것을 만들어 보세요. 댓글이나 소셜 미디어를 통해 여러분의 창작물을 공유하는 것을 잊지 마세요!</p>

<p>여기에서도 저를 찾으실 수 있습니다- </p>

• 엑스
• 링크드인