H5C3实现百度钱包

12 Dec 2017

Reading time ~1 minute

图片翻转效果

关键点：

transform-style: preserve-3d;
background-position: right;
::before 和 ::after 伪元素的使用

先准备一张 606*301的并列图片，如下图：（如何你没有准备好图片，可直接保存下面图片使用^_^努力！）

html

    <div class="box"></div>

css

    body {
        background-color: #ccc;
    }
    .box {
        width: 303px;
        height: 301px;
        border-radius: 50%;
        margin: 100px auto;
        background-color: #fff;
        position: relative;
        /*将父元素的子元素设置为一个整体*/
        transform-style: preserve-3d;
        transition: 1s;
    }
    .box:before,.box:after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: url(baidu.png);
        position: absolute;
    }
    .box:before {
        z-index: 1;
    }
    .box:after {
        background-position: right;
        transform: translateZ(0px) rotateY(180deg);
    }
    .box:hover {
        transform:translateZ(0px) rotateY(180deg);
    }