CSS 3D Flip on Hover - Pure CSS3 3D Button Hover Effects - Tutorial

Hôm nay mình sẽ giới thiệu cho các bạn một hiệu ứng 3D Flip on Hover đơn giản bằng CSS3 vô cùng ấn tượng.
<a href="" id="btn-effect">
    <span class="front">Click</span>
    <span class="center"></span>
    <span class="back">Here</span>
</a>

#btn-effect {
    position: relative;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 25px;
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
    width: 200px;
    height: 60px;
    span {
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        text-align: center;
        font-size: 25px;
        line-height: 60px;
        background-color: rgba(255,255,255,.05);
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        border-radius: 30px;
        color: #fff;
        -webkit-transition: 1s;
        -o-transition: 1s;
        transition: 1s;
        &.front {
            -webkit-transform: rotateX(0deg) translateZ(20px);
                    transform: rotateX(0deg) translateZ(20px);
        }
        &.back {
            -webkit-transform: rotateX(-180deg) translateZ(20px);
                    transform: rotateX(-180deg) translateZ(20px);
                    background: -webkit-gradient(linear, right top, left top, from(#ffdd1f), to(#c31a5b));
                background: -webkit-linear-gradient(right, #ffdd1f, #c31a5b);
                background: -o-linear-gradient(right, #ffdd1f, #c31a5b);
                background: linear-gradient(to left, #ffdd1f, #c31a5b);
        }
        &.center {
            background: -webkit-gradient(linear, right top, left top, from(#c31a5b), to(#7129bd));
            background: -webkit-linear-gradient(right, #c31a5b, #7129bd);
            background: -o-linear-gradient(right, #c31a5b, #7129bd);
            background: linear-gradient(to left, #c31a5b, #7129bd);
            &:before {
                content: "";
                position: absolute;
                top:0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 30px;
                -webkit-transform: translateZ(-1px);
                        transform: translateZ(-1px);
                // background: -webkit-gradient(linear, right top, left top, from(#ffdd1f), to(#c31a5b));
                // background: -webkit-linear-gradient(right, #ffdd1f, #c31a5b);
                // background: -o-linear-gradient(right, #ffdd1f, #c31a5b);
                // background: linear-gradient(to left, #ffdd1f, #c31a5b);
            }
        }
    }
    &:hover {
        span {
            &.front {
                -webkit-transform: rotateX(180deg) translateZ(20px);
                        transform: rotateX(180deg) translateZ(20px);
            }
            &.back {
                -webkit-transform: rotateX(0deg) translateZ(20px);
                        transform: rotateX(0deg) translateZ(20px);
            }
            &.center {
                -webkit-transform: rotateX(-180deg);
                        transform: rotateX(-180deg);
            }
        }
    }
}

0 thảo luận về CSS 3D Flip on Hover - Pure CSS3 3D Button Hover Effects - 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