답변 2개
"""책이 각도로 돌아가는 입체표현을
어떤 방법으로 한걸까요?"""
= 두 이미지로 앞면과 뒷면을 설정하여 3D 전환(입체 회전) 구현이 가능합니다.
이미지에 마우스 오버 시 "Original_image.png"에서 "Mouse_over_image.png"로 전환하는
애니메이션은 HTML과 CSS를 활용하여 간단히 구현할 수 있습니다.
HTML 코드에서는 태그에 두 이미지를 포함시키고,
CSS를 통해 :hover 속성을 사용하여 이미지 변경 효과를 정의합니다.
애니메이션 효과를 추가하려면 transition 속성을 활용하여 부드러운 전환이 가능합니다.
＊HTML 구조:
마우스 오버 시 대체 이미지를 활성화하도록 클래스 설정. ＊CSS 스타일링: 기본 이미지는 position: relative로 설정. 대체 이미지는 position: absolute와 opacity: 0으로 숨김 처리. :hover 시 opacity를 1로 전환하며 transition 속성으로 애니메이션 효과 추가. ＊JavaScript(선택 사항): 더욱 복잡한 상호작용을 원할 경우 JavaScript로 동적 이미지 전환 구현. ※ 영카트의 경우 ; ＊skin/shop/basic/item.info.skin.php ＊css/default_shop.css ＊js/shop.list.js</p>
<p><section id="sit_info">
<div id="sit_tab">
<ul class="tab_tit">
...
</ul>
<ul class="tab_con">
<li id="sit_inf">
<h2 class="contents_tit"><span>상품 정보</span></h2>
<div class="image-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img src="/img/Original_image.png" alt="Original Image">
</div>
<div class="flip-card-back">
<img src="/img/Mouse_over_image.png" alt="Mouse Over Image">
</div>
</div>
</div>
</div>
...
</li>
...
</ul>
</div>
</section></p>
<p></p>
<p>.image-container {
perspective: 1000px; /* 3D 효과를 위한 원근 추가 */
width: 300px; /* 이미지 너비 */
height: 300px; /* 이미지 높이 */
overflow: hidden;
position: relative;
}</p>
<p>.flip-card {
width: 100%;
height: 100%;
transform-style: preserve-3d; /* 3D 공간 유지 */
transition: transform 0.6s ease-in-out;
position: relative;
}</p>
<p>.flip-card-inner {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}</p>
<p>.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* 뒷면 숨기기 */
}</p>
<p>.flip-card-front {
background-color: #ffffff;
}</p>
<p>.flip-card-back {
background-color: #ffffff;
transform: rotateY(180deg); /* 뒤집힌 상태 */
}</p>
<p>.image-container:hover .flip-card {
transform: rotateY(180deg); /* 마우스 오버 시 180도 회전 */
}</p>
<p></p>
<p>document.addEventListener("DOMContentLoaded", function () {
var flipCard = document.querySelector('.flip-card');</p>
<p> flipCard.addEventListener('mouseover', function () {
this.style.transform = 'rotateY(180deg)';
});</p>
<p> flipCard.addEventListener('mouseout', function () {
this.style.transform = 'rotateY(0deg)';
});
});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인