Pure CSS 3D Contact Info Box UI Design - CSS 3D Box Hover Effect - HTML5 CSS3 Tutorial For Beginners

Hôm nay mình giới thiệu cho các bạn 1 hiệu ứng hover 3D Contact Info Box đơn giản, thướng áp dụng cho các thanh điều hướng hay social menu bằng CSS3.
<div id="social-container">
    <div class="item">
        <div class="img-container"><i class="demo-icon ecs-location"></i></div>
        <div class="text-container">
            <p><a href="">123 Đinh Tiên Hoàng, P.Bến Nghé, Q.1, TpHCM</a></p>
        </div>
    </div>
    <div class="item">
        <div class="img-container"><i class="demo-icon ecs-phone"></i></div>
        <div class="text-container" style="background-color: #e91e63">
            <p><a href="">090 xxxx xxx</a></p>
        </div>
    </div>
    <div class="item">
        <div class="img-container"><i class="demo-icon ecs-mail-alt"></i></div>
        <div class="text-container" style="background-color: #8bc34a">
            <p><a href="">Textmail@gmail.com</a></p>
        </div>
    </div>
</div>

#social-container {
    -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;
    position: relative;
    .item {
        position: relative;
        width: 250px;
        height: 100px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        text-align: center;
        margin: 0 10px;
        background-color: #ccc;
        .img-container {
            width: 100%;
            height: 100%;
            background-color: #151515;
            -webkit-transition: .5s;
            transition: .5s;
            -webkit-transform-origin: top;
                    transform-origin: top;
            -webkit-transform: translateY(0px) rotateX(0deg);
                    transform: translateY(0px) rotateX(0deg);
            i {
                font-size: 50px;
                line-height: 100px;
                color: #999
            }
        }
        .text-container {
            -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;
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #03a9f4;
            padding: 5px;
            -webkit-transition: .5s;
            transition: .5s;
            -webkit-transform-origin: bottom;
                    transform-origin: bottom;
            -webkit-transform: translateY(-100px) rotateX(90deg);
                    transform: translateY(-100px) rotateX(90deg);
            p {
                font-weight: bold;
                a {
                    color: #fff;
                }
            }
        }
        &:hover {
            .img-container {
                -webkit-transform: translateY(100%) rotateX(90deg);
                        transform: translateY(100%) rotateX(90deg);
            }
            .text-container {
                -webkit-transform: translateY(0%) rotateX(0deg);
                        transform: translateY(0%) rotateX(0deg);
            }
        }
    }
}
@media screen and (max-width: 768px) {
    #social-container {
            -webkit-box-align: inherit;
            -webkit-align-items: inherit;
            -ms-flex-align: inherit;
            align-items: inherit;
            -webkit-box-pack: inherit;
            -webkit-justify-content: inherit;
            -ms-flex-pack: inherit;
            justify-content: inherit;
            display: block;
        .item {
            margin: 20px 0;
        }
    }
}

1 thảo luận về Pure CSS 3D Contact Info Box UI Design - CSS 3D Box Hover Effect - HTML5 CSS3 Tutorial For Beginners

Kerri Collins - 17/10/2020

It looks like this link is broken on your site: https://boldman.vn/tags/contact I thought you would like to know :). Silly mistakes can ruin your site's credibility. I've used a tool called linkSniff.com in the past to keep mistakes off of my website. -Kerri

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