HTML+css做炫酷的3d盒子反转

3d盒子反战

效果如图如下：

HTML重要的代码如下：

<ul><li><div class=\"box\"><div class=\"front\">目录</div><div class=\"bottom\">市场调研</div></div></li><li><div class=\"box\"><div class=\"front\">目录</div><div class=\"bottom\">市场测试</div></div></li><li><div class=\"box\"><div class=\"front\">目录</div><div class=\"bottom\">市场招聘</div></div></li><li><div class=\"box\"><div class=\"front\">目录</div><div class=\"bottom\">市场开展</div></div></li><li><div class=\"box\"><div class=\"front\">目录</div><div class=\"bottom\">市场研究</div></div></li></ul>

css代码如下：

* {margin: 0;padding: 0;}* {list-style: none;}ul {margin: 100px;}ul li {float: left;width: 120px;height: 35px;margin-left: 10px;}.box {position: relative;font-size: 16px;text-align: center;line-height: 35px;width: 100%;height: 100%;transform-style: preserve-3d;transition: all .4s;}.box:hover {transform: rotateX(90deg);}.front,.bottom {position: absolute;width: 100%;height: 100%;left: 0;top: 0;}.front {background-color: pink;z-index: 1;transform: translateZ(17.5px);}.bottom {background-color: red;transform: translateY(17.5px) rotateX(-90deg) ;}