CSS 3D Flipping Card Hover Effect - Pure CSS 3D Image Flip Effects On Hover - Tutorial

Bài viết này mình sẽ giới thiệu tới các bạn một hiệu ứng liên quan tới 3D Flipping Card, đơn giản bằng CSS3 và HTML ai cũng có thể thực hiện được.

John Doe

Senior Designer
<div id="item-card">
    <div class="img-container">
        <img src="https://www.boldman.vn/wwwroot/templates/website/global/img/slide-image-on-hover.jpg" alt="">
    </div>
    <div class="text-container">
        <div class="text-inner">
            <h3 class="title">John Doe</h3>
            <h5 class="job">Senior Designer</h5>
            <div class="social-container">
                <a href="">
                    <i class="demo-con ecs-facebook"></i>
                </a>
                <a href="">
                    <i class="demo-con ecs-gplus"></i>
                </a>
                <a href="">
                    <i class="demo-con ecs-youtube-play"></i>
                </a>
            </div>
        </div>
    </div>
</div>

#item-card {
    position: relative;
    width: 300px;
    height: 400px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 600px;
            perspective: 600px;
    .img-container {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        background:#252525;
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        display: block;
        min-height: 100%;
        width: 100%;
        overflow: hidden;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;     
        img {
            position: absolute;
            top: 0%;
            left: 50%;
            -ms-transform: translate(-50%,0);
            -webkit-transform: translate(-50%,0);
            transform: translate(-50%,0);
            width: auto;
            height: 100%;
            max-width: inherit;
        }
    }
    .text-container {
        position: absolute;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
        background-color: #000;
        -webkit-transform: rotateX(180deg);
                transform: rotateX(180deg);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
        overflow: hidden;
        visibility: hidden;
        opacity: 0;
        .text-inner {
            position: relative;
            z-index: 2;
            text-align: center;
            -webkit-box-sizing: border-box;
                    box-sizing: border-box;
            color: #fff;
            .job {
                color: #a7a7a7;
            }
            .social-container {
                margin-top: 20px;
                a {
                    display: inline-block;
                    width: 34px;
                    height: 34px;
                    text-align: center;
                    line-height: 34px;
                    color: #fff;
                    background-color: #262626;
                    border-radius: 100%;
                    margin-right: 5px;
                    -webkit-transition: .5s;
                    -o-transition: .5s;
                    transition: .5s;
                    &:last-child {
                        margin-right: 0;
                    }
                    &:hover {
                        background-color: #e91e63;
                    }
                }
            }
        }
        &:before {
            position: absolute;
            content: "";
            top:0;
            left: -50%;
            width: 100%;
            height: 100%;
            z-index: 1;
            background-color: rgba(255,255,255,.1);
        }
    }
    &:hover {
        .img-container {
            -webkit-transform: rotateX(-180deg);
                    transform: rotateX(-180deg);
        }
        .text-container {
            -webkit-transform: rotateX(0deg);
                    transform: rotateX(0deg);
            opacity: 1;
            visibility: visible;
        }
    }
}

0 thảo luận về CSS 3D Flipping Card Hover Effect - Pure CSS 3D Image Flip Effects On Hover - Tutorial

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục