摘要：分析代码如下标签里包裹一个盒子里包裹两个，为效果的前后面做准备。分析外观定位代码如下效果首先创造环境，保留空间在的时候，我们让旋转，正面面对我们的元素向上翻转，下面有元素翻转上来，并且在翻转时有一个凸出来的效果。
效果预览
分析：可以看出hover的时候是有前后两个面的翻转，并且有一个凸出效果。
代码如下：
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;}
为了让效果明显，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);
}
总结
这个例子很好的说明了，一定要注意变换的中心点。
父元素变换时，子元素是以父元素的中心点为中心点变换的，而不是自己。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111187.html
摘要：实现方法可参考这篇文章纯打造的模型渲染器实现全景。天空盒子相信很多打造过或有了解过全景的同行们都知道这个概念。首先将创建好的六个面切割出来，以命名标记位置。柱形柱形全景也不算复杂。 前言 对的，本文就是着重介绍如何使用CSS3中的3D变换打造出H5中的3D效果。灵感来源于造物节团队的3d引擎，因为使用方法比较复杂，也没有开源的API文档，于是想自己另外造个轮子，便开始了相关内容的学习和...
摘要：前言日前，造物节放肆地火了一把。作为一个叙事性的，它的场景和动效全部基于代码实现，而抛弃了视频这种方式。但它与用户的交互比较少，因而并不能直观体现出这是完全基于代码实现的。很好地为我们诠释了，以变换打造亦不是为一种明智的低成本的实现方式。 前言 日前，taobao造物节H5放肆地火了一把。相信接下来将3d嵌入网站的这种营销方式会被越来越多的人留意到。工作之余体验了若干个3d H5页面，...
摘要：写在前面的前面现在拍电影搞真人秀都流行拍续集，哥今天给大家带来的是打造最美机房的续集，哥的目标是成为机房界的网红。机柜标签机房中最重要的物理资源机柜是机房管理规划监控人员最关注的对象之一。 写在前面的前面 现在拍电影、搞真人秀都流行拍续集，哥今天给大家带来的是打造最美3D机房的续集，哥的目标是成为3D机房界的网红。 -------------------------------我是这个...
摘要：写在前面的前面现在拍电影搞真人秀都流行拍续集，哥今天给大家带来的是打造最美机房的续集，哥的目标是成为机房界的网红。机柜标签机房中最重要的物理资源机柜是机房管理规划监控人员最关注的对象之一。 写在前面的前面 现在拍电影、搞真人秀都流行拍续集，哥今天给大家带来的是打造最美3D机房的续集，哥的目标是成为3D机房界的网红。 -------------------------------我是这个...
阅读 1337·2023-04-26 02:50
阅读 3273·2023-04-26 00:28
阅读 1771·2023-04-25 15:18
阅读 2941·2021-11-24 10:31
阅读 594·2021-11-11 16:55
阅读 792·2019-08-30 13:00
阅读 901·2019-08-29 15:19
阅读 1655·2019-08-29 13:09
