CSS3打造3D导航_html/css

来源：懂视网责编：小采时间：2020-11-27 16:35:12

CSS3打造3D导航_html/css

CSS3打造3D导航_html/css_WEB-ITnose:效果预览分析：可以看出hover的时候是有前后两个面的翻转，并且有一个凸出效果。 HTML分析代码如下： Home Home Home Demo Demo Demo Deal Deal Deal About About About 标签里包裹一个盒子里包裹两个，为效果的前后面做准

推荐度：

点击下载本文 文档为doc格式

导读CSS3打造3D导航_html/css_WEB-ITnose:效果预览分析：可以看出hover的时候是有前后两个面的翻转，并且有一个凸出效果。 HTML分析代码如下： Home Home Home Demo Demo Demo Deal Deal Deal About About About 标签里包裹一个盒子里包裹两个，为效果的前后面做准

效果预览

分析：可以看出hover的时候是有前后两个面的翻转，并且有一个凸出效果。

HTML分析

代码如下：

  Home Home Home 
  Demo Demo Demo 
  Deal Deal Deal 
  About About About

标签里包裹一个盒子里包裹两个，为效果的前后面做准备。

CSS分析

1.外观、定位

代码如下：

 *{ box-sizing:border-box;} .block-menu{background:black;} .block-menu li{display:inline-block;} .block-menu li a{ color:#fff; text-decoration:none; text-transform:uppercase; font-size:24px; line-height:20px; font-weight:bold; font-family: Arial, sans-serif; display:block; padding:15px 10px; } .three-d{ position:relative; } .three-d-box,.front,.back{ width:100%; height:100%; position:absolute; top:0; left:0; padding:15px 10px; background:black; }

2.3D效果

首先创造3D环境，保留3D空间：

.three-d{perspective:200px;}.three-d-box{transform-style:preserve-3d;}

1.在three-d:hover的时候，我们让.three-d-box旋转，正面面对我们的元素向上翻转，下面有元素翻转上来，并且在翻转时有一个凸出来的效果。
2.关于这个凸出的效果，大家可以进行测试，如果一个元素是以自己的中心为中心点进行翻转时，是不会有凸出的效果。所以如果要制造一个凸出的效果，那么元素翻转的中心就一定不是自己的中心。
3.同时我们看到，在翻转的同时，元素贴回了ul所在的平面的，因此应该是在Z轴上有一定负的位移。

根据以上3点，我们可以设置3D变换：

.three-d:hover .three-d-box{ transform:translateZ(-50px) rotateX(90deg);}

在这里，我先设置translateZ而不是rotateX，是因为rotateX之后坐标轴会变换，如果先roatetX后translateZ的话，Z轴的位移就不是垂直于ul平面（面对我们）的位移了。

由于变换时，.three-d-box有Z轴上的负位移，如果不给.front,.back设置Z轴上的位移的话，这两个平面最后不会贴回ul的平面，而是在ul平面的后面。因此，我们给.front,.back设置Z轴正方向且等于变化时的位移的距离，如此，变化时，这两个元素就会完美贴合ul所在的平面了。

.front,.back{transform:translateZ(50px);}

变换时，.back是从下面上来的，理应有一个rotateX(-90deg)的旋转。如果先translateZ再rotateX的话，.back所在的Y轴上的高度是的一半，动画时并没有从下面上来的效果，因此，应该先rotateX变化坐标后再translateZ，这样.back就在ul的“下方”了。

.front{transform:rotateX(0deg) translateZ(50px);}.back{transform:rotateX(-90deg) translateZ(50px);}

在没有hover的情况下，由于给.front,.back设置了translateZ，.front,.back看起来比正常的大。为了在没有hover的情况下，.front能贴合，我给.three-d设置translateZ(-50px)，这样.front虽然先跟随.three-d在Z轴上有-50px的负位移，但随后translateZ(50px)又让它在Z轴上有50px的正位移，如此，便贴合了.
.three-d-box{transform:translateZ(-50px);}

最后，我们为这个变化添加一个过渡的效果：
.three-d-box{transition:all .3s;}

3.注意

为了让效果明显，Z轴上的位移设置的较大值50px;在了解原理后，大家可以设置小一点的位移值，这样下方的.back就不会如此明显的看到了。

hover的时候，.three-d-box旋转，它的子元素旋转的中心点是.three-d-box的中心点而不是子元素自己的中心点哦~这样你才能看到有凸出的效果。

hover的时候是会覆盖原来的样式，所以hover时，原始状态是.three-d-box在Z轴的位移是0，.front,.back在Z轴的位移是50px;hover的时候以此为起点进行变换。

最终3D相关代码如下：

.three-d{perspective:200px;}.three-d-box{ transform-style:preserve-3d; transform:translateZ(-25px); transition: all .3s ; }.front{transform:rotateX(0deg) translateZ(25px);}.back{transform:rotateX(-90deg) translateZ(25px);}.three-d:hover .three-d-box{ transform: translateZ(-25px) rotateX(90deg);}

总结

这个例子很好的说明了，一定要注意变换的中心点。

父元素变换时，子元素是以父元素的中心点为中心点变换的，而不是自己。