CSS双面旋转

CSS旋转动画

这个是一个傻瓜式的知识点backface-visibility: hidden;
transform: rotateY(180deg);相当于正面的我 和 背面的你！当我转身就成了 背面的我 和 正面的你。
有了backface-visibility就相当于我背后安了隐藏甲！

<div class="box">
    <ul>
        <li>
            <a href="javascript:;">
                <div class="zm">
                    <img src="123.jpg">
                </div>
                <div class="bm">
                    <h4>你好</h4>
                    <p>我是你的爸爸</p>
                </div>
            </a>
        </li>
    </ul>
</div>

<style>
        .box ul {
            width: 940px;
            height: 200px;
        }

        .box ul li {
            width: 200px;
            height: 194px;
            margin-right: 50px;
        }

        .box ul li a {
            width: 100%;
            height: 100%;
            position: relative;
            display: block
        }

        .box ul li a > div {
            position: absolute;
            width: 100%;
            height: 180px;
            color: #fff;
            transition: .8s ease-in-out;
            backface-visibility: hidden;
        }

        .zm {
           transform: rotateY(0);
           z-index: 2;
        }

        .bm {
            background: #2187E5;
            transform: rotateY(180deg);
            z-index: 1;
        }

        .box ul li a:hover .zm{
           transform: rotateY(-180deg);
        }

        .box ul li a:hover .bm{
            background: #2187E5;
            transform: rotateY(0deg);
        }

    </style>