Css3——3D两面翻转盒子案例

思路：
html结构:
box父盒子里面包含前后两个子盒子
box是翻转的盒子 qian是前面的盒子，hou是后面的盒子

css样式：
box指定大小，添加3d呈现
hou盒子要沿着Y轴旋转180度
最后鼠标经过box沿着y轴旋转180度

HTML:

<div class="box">
        <div class="qian">我是正面</div>
        <div class="hou">我是反面</div>
    </div>

CSS:

 body{
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            transition: all .5s;
            / 让背面的紫色盒子保留立体空间  给父级添加/
            transform-style: preserve-3d;
        }
        .box:hover{
            transform: rotateY(180deg);
        }
        .qian,
        .hou {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            color: #fff;
            text-align: center;
            line-height: 300px;


        }

        .qian {

            background-color: pink;
            / 提升权限/
            z-index: 1;
        }

        .hou {
            background-color: purple;
            /背靠背旋转 /
            transform: rotateY(180deg);
        }

效果：