思路
可以使用两只手模拟两个盒子去理解
1, 两个 span 的形状如图
正面图
2, 使其进行 3D 变形, 其中有一个绕 x 轴进行 90° 旋转 rotateX(90deg)
两个盒子的侧面图
3, 后又使其向上移动一半的距离 translateZ(20px), 因为 rotateX(90deg) 的旋转中心是沿着 center 的;
移动后的侧面图
4, 然后让竖着的那个 span 向前也就是 z 轴移动一半的距离就可以构成 3D 导航的原型
侧面图
5, 以上就是 3D 导航的原理, 代码如下
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- body { margin: 0; padding: 0; font-family: '微软雅黑'; background-color: #F7F7F7;
- } .nav { height: 40px; margin-top: 50px; text-align: center; list-style:
- none; } li { width: 120px; height: 40px; line-height: 40px; float: left;
- position: relative; transition: all 1s; transform-style: preserve-3d; }
- li span { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display:
- block; } li span:last-child { background-color: salmon; transform: rotateX(90deg)
- translateZ(20px); } li span:first-child { background-color: slateblue;
- transform: translateZ(20px); } .nav li:hover { transform: rotateX(-90deg);
- }
- </style>
- </head>
- <body>
- <ul class="nav">
- <li>
- <span>
- 天气
- </span>
- <span>
- 太热了
- </span>
- </li>
- <li>
- <span>
- 天气
- </span>
- <span>
- 太热了
- </span>
- </li>
- <li>
- <span>
- 天气
- </span>
- <span>
- 太热了
- </span>
- </li>
- <li>
- <span>
- 天气
- </span>
- <span>
- 太热了
- </span>
- </li>
- </ul>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/466e9869cf98