CSS로 플립 카드를 만드는 방법
이번 포스트에서는 CSS로 플립카드를 만드는 방법을 알아보겠습니다.
HTML:
<div class="card-container">
<div class="card">
<div class="side">
<h3>Front</h3>
</div>
<div class="side back">
<h3>Back</h3>
</div>
</div>
</div>
CSS:
/*card container with the height and width of 150px and used perspective for 3d*/
.card-container{
cursor:pointer;
height:150px;
width:150px;
perspective:600;
position:relative;
}
/*card to fit the size of the card container by giving the width and height of 100% and position of absolute which is relative to the card container*/
.card{
height:100%;
width:100%;
transform-style:preserve-3d;
position:absolute;
transition:all 1s ease-in-out;
}
/*card rotate from y axis on hover*/
.card:hover{
transform:rotatey(180deg);
}
/*Front side of the card with the property of backface visibility to make the other side of card hidden*/
.side{
backface-visibility:hidden;
height:100%;
width:100%;
position:absolute;
border-radius:6px;
background-color:limegreen;
}
/*back side of the card*/
.back{
transform:rotatey(180deg);
background-color:hotpink;
}
행복한 코딩! 🙌
Reference
이 문제에 관하여(CSS로 플립 카드를 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pinkylalwani/how-to-create-a-flip-card-with-css-51m0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)