天跟大家分享一个很很酷6的一个网站前端小技术，

打开网页编辑软件，新建一个HTML网页，然后在body里写下如图代码

然后添加css3样式代码如图

添加好后点击键盘上的ctrl+s保存，保存路径随意

欢迎大家转载收藏，有需要源码的朋友可以关注我后私聊我，还可以加咱们的交流群：309073798

最后有不好的地方欢迎在留言区吐槽

现3d效果旋转跳跃的立方体，CSS3中具有的perspective就是为了设置井深，创建一个3D的环境，而transform-style就是为了创建3d环境。

井深：指视觉与平面的距离，使具有三维位置变换的元素产生透视效果，就是我们理解的【Z轴】。 从视觉上观察，值越大看起来距自己越近，元素整体越大；值越小，越远，元素整体越小。在设计中给需要3D的盒子的父级设置井深，让其具有立体透视效果 ，通常perspective使用的值800px或者1200px ，这两个值从视觉上看比较舒服，也可以根据需求自行设置。

首先，需要创建一个大盒子div将立方体包裹起来，以便在css样式中固定六个面的位置：

1. 
   
2. <div class="wrap">
3. <div class="cube">
4. <div class="front">前</div>
5. <div class="back">后</div>
6. <div class="left">左</div>
7. <div class="right">右</div>
8. <div class="top">上</div>
9. <div class="bottom">下</div>
10. </div>
11. </div>

在CSS中添加相关的样式如下：

1. 
   
2. * {
3. padding: 0px;
4. margin: 0px;
5. }