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.

Danh mục

Effects Navigations Templates UX Patterns Plugin

Tags

#button #3D

DEMO

HTML

<a href="" id="btn-effect">
    <span class="front">Click</span>
    <span class="center"></span>
    <span class="back">Here</span>
</a>

SCSS

#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);
            }
        }
    }
}