[HTML CSS] 플립 카드 만들기

 Hover Flip Card - HTML CSS

---

 

codepen link: https://codepen.io/bongcasso01/pen/MWGYXXr

See the Pen hover flip card vanilla css by rebornbb (@bongcasso01) on CodePen.

 

html

 <!--플립 카드 시작-->
            <div class="align-Center-row">
                <div class="flip-card">
                    <div class="flip-card-inner">
                        <div class="flip-card-front">
                            <img src="https://cdn-icons-png.flaticon.com/512/921/921439.png" class="Introduce-Card-Img" alt="introduce-repick-icon">
                            <h1 class="Tmoney-fontsize-200">Earth Keeper</h1>
                        </div>
                        <div class="flip-card-back">
                            <h1 class="Tmoney-fontsize-150 MarginBottom-5"> 지키는 사람들</h1>
                            <p class="KOTRA-fontsize-100">우리는 자연을 지키는
                                <br>모든 이들을 위한 사이트입니다.
                                <br>개인의 이익만이 아닌
                                <br>더 나아가 공공의 미래를 위한
                                <br>아름다운 여러분들의 선행들을
                                <br>우리는 도우며 함께합니다!</p>
                        </div>
                    </div>
                </div>
            </div>

css

.flip-card {
    background-color: transparent;
    border: none;
    width: 300px;
    height: 220px;
    perspective: 1000px; 
  /* perspective : 원근법 
  3D effect를 원하지 않는다면 지우세요 */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 160%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  /* preserve-3d : 변환된 자식 요소가 3D 변환을 유지하도록 합니다. */
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
   /* Y축으로 180도 flip되게 만들어줍니다 */
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden;
}

.flip-card-front {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: solid black 3px;
    border-radius: 5%;
    background-color: white;
    color: black;
}

.flip-card-back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5%;
    background-color: #71D3C2;
    border: solid black 3px;
    color: white;
    transform: rotateY(180deg);
}

.Introduce-Card-Img {
    width: 65%;
    margin-bottom: 15%;
}

 

perspective(원근법)설명 링크:

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective

perspective() - CSS: Cascading Style Sheets | MDN

preserve-3d 설명링크 :

https://www.w3schools.com/cssref/css3_pr_transform-style.asp

CSS transform-style property