课堂案例之两面翻转的盒子

1 实现步骤

• 搭建HTML结构
  box父盒子里面包含前后两个子盒子。
  box是翻转的盒子，front是前面盒子，back是后面盒子。

<div class="box">
	<div class="front">小王小王几点啦</div>
    <div class="back">前端前进前前进</div>
</div>

• CSS样式：
  box指定大小，切记要添加3d呈现。
  back盒子要沿着Y轴翻转180度。
  最后鼠标经过box沿着Y轴旋转180deg。

<style>
        body {
            perspective: 400px;
        }
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            /* 为了好看 能看出3d效果 所以加过渡 */
            transition: all .4s;
            /* 让背面的紫色盒子保留立体空间，如果不加 看不到紫色盒子 只能看到粉色盒子背面 给父级添加 */
            transform-style: preserve-3d;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
            color: #fff;
        }
        .front {
            background-color: pink;
            transform: translateZ(1px);
        }
        .back {
            background-color: purple;
            /* 使反转后可以看到背后图片的正面 故先给背后图片沿y轴旋转180度(背靠背) */
            transform: rotateY(180deg);
        }
    </style>

2 界面实现

放置鼠标前：

放置鼠标中：

放置鼠标后：