今天玩了下 css 3D 旋转，顺便写了一个小 Demo
只写了一个 hover 向上翻转的，其他效果基本类似，就没多写，了解原理即可，可自行扩展。
- 先简单贴个效果图
- 直接上代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>3D盒子旋转Demo</title>
<style>
.rotate-box {
height: 137px;
width: 286px;
overflow: hidden; /* 隐藏翻转上去和翻转下去的图片 */
}
.rotate-inner {
transition: all .4s ease;
perspective: 428px; /* 重点属性，定义 3D 元素距视图的距离，有他才有3D效果 */
-webkit-perspective: 428px;
}
.rotate-inner .top-block,
.rotate-inner .bottom-block {
backface-visibility: hidden; /* 辅助属性-属性定义当元素不面向屏幕时是否可见，如果在旋转元素不希望看到其背面时，该属性很有用 */
transition: all .4s ease;
-webkit-backface-visibility: hidden;
-webkit-transition: all .4s ease;
width: 286px;
height: 137px;
}
.rotate-inner .top-block {
transform-origin: bottom; /* 旋转轴线位置 */
-webkit-transform-origin: bottom;
transform: rotateX(0deg); /* 默认旋转角度 */
-webkit-transform: rotateX(0deg);
background-color: blue;
}
.rotate-inner .bottom-block {
transform-origin: top; /* 旋转轴线位置 */
-webkit-transform-origin: top;
transform: rotateX(-90deg);
-webkit-transform: rotateX(-90deg);
background-color: #777;
}
.rotate-box:hover .rotate-inner {
margin-top: -137px; /* 旋转后上移，把下面的block显示，上面的隐藏 */
}
.rotate-box:hover .rotate-inner .top-block {
transform: rotateX(90deg); /* 旋转后角度 */
-webkit-transform: rotateX(90deg);
}
.rotate-box:hover .rotate-inner .bottom-block {
transform: rotateX(0);
-webkit-transform: rotateX(0);
}
</style>
</head>
<body>
<div class="rotate-box">
<div class="rotate-inner">
<div class="top-block"></div>
<div class="bottom-block"></div>
</div>
</div>
</body>
</html>- 其实就是两个块上下堆放，外层设置超出隐藏，然后把上面的块沿X轴底部旋转，下面的沿X轴顶部旋转，最后相当于下面的呈现出来了，上面的又隐藏掉了
- 重点是perspective属性，定义 3D 元素距视图的距离，有他才有3D效果
