本帖最后由 庭院深深深几许 于 2019-4-19 09:20 编辑
实现一个立方体
由于HTML页面都是平面，并没有提供标准的立方体解决方案，就像我们在一张A4纸上不可能绘制出一个标准的立方体，只能通过二维平面的视觉效果来模拟一个立方体效果，如图所示。
毫无疑问，上图中这个立方体只是一个视觉上的3D图像而已，那么我们要利用一个平面图来模拟这个3D图像，必然会使用到Transform的扭曲(skew)属性，以及精确的位移，甚至还需要一些三角形计算的知识和其他一个标准的CSS属性。
我们来看看具体实现的过程：
(1) 首先我们需要准备三个DIV，并且颜色不能一样，从而构成3D图形的三个面。正面，上面和右面。所以我们需要上面一个DIV，下面两个DIV，为了容易进行更精确的控制位置，我们可以使用绝对定位。初步设置后如图所示。
(2) 正面是一个正方形;上面需要让DIV向右沿X方向扭曲，则需要使用skewX;右面需要让DIV向上沿Y方向扭曲，则需要使用skewY。
(3) 由于DIV的扭曲变形默认是沿中心点进行扭曲的，所以一旦执行扭曲后，上面和右面的位置将无法完全与下面的正方形对齐，所以我们还需要对其位置进行调整。
(4) 设置三条虚线，其中两条可对一个正方形DIV的左边和底边设置边框，另外一条斜的虚线则仍然需要对一个DIV使用Tranform的rotate进行旋转，进面再对其位置进行调整。
(5) 最后对需要的地方进行微调，一个立方体就会出现。
读者可以沿此思路先自己先实现一遍，并对CSS的属性有更清晰的理解。实现代码如下：[HTML] 纯文本查看 复制代码 <html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#top {
width: 300px;
height: 150px;
background-color: lightgreen;
position: fixed;
top: 100px;
left: 475px;
transform: skewX(-45deg);
}
#left {
width: 300px;
height: 300px;
background-color: orangered;
position: fixed;
top: 250px;
left: 400px;
}
#right {
width: 150px;
height: 300px;
background-color: purple;
position: fixed;
top: 175px;
left: 700px;
transform: skewY(-45deg);
}
#dash1 {
width: 300px;
height: 300px;
position: fixed;
border-width: 0 0 2px 2px;
border-color: white;
border-style: dashed;
left: 550px;
top: 100px;
}
#dash2 {
width: 150px;
height: 0px;
position: fixed;
left: 400px;
top: 475px;
border-bottom: 2px dashed white;
transform: skewY(-45deg);
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="dash1"></div>
<div id="dash2"></div>
</body>
</html>
上述代码中使用了绝对定位，当然，是否使用绝对定位不是必需的。实例代码只是为了考虑到接下来的一个实战。
实现立方体运动
上述代码已经实现了一个立方体，在对CSS的属性运用也有了更进一步的理解。现在，我们就基于该立方体，来实现一个动画效果，该动画效果的实现目的是：完成由三个DIV动态组合为立方体的动画过程。
先分析一下题意，要实现一个动态组合为立方体的过程，必然我们需要使用到Animation，同时，既然是动态组合，那么必然最开始的三个DIV是分散在各处的，通过动画运行的效果慢慢的组合而成。另外，组合完成后，我们还需要设置animation-fill-mode为forwards，这样才可以和保持住这个立方体。
另外一方面，由于我们的立方体是位于页面的大约中间的位置(通过上一节的实战中使用绝对定位可以得出该结论)，那么我们可以设置最开始的DIV的位置为任意位置，甚至设置为隐藏在浏览器窗口之外，从而实现突然飞入的效果(类似于PPT当中的动画特效)。那么，如何能够实现隐藏在浏览器窗口之外呢，其实方法非常简单，我们只需要设置DIV的定位为负数，或超过浏览器宽度的一个大值，比如top: -300px，则表示距离顶部-300你到，那么该DIV将隐藏中浏览器顶部。left: 2000px，则如果浏览器的宽度低于2000像素，那么相当于该DIV位于浏览器窗口的右侧不可见区域里。然后通过“@keyframes”来修改定位属性，让DIV慢慢出现即可。
基本的思路已经有了，我们现在来看看代码的具体实现：
[HTML] 纯文本查看 复制代码 <html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#top {
width: 300px;
height: 150px;
background-color: lightgreen;
position: fixed;
animation: movetop 5s forwards;
top: -200px;
left: -200px;
}
@keyframes movetop {
0%{}
100%{
top: 100px;
left: 475px;
transform: skewX(-45deg);
}
}
#left {
width: 300px;
height: 300px;
background-color: orangered;
position: fixed;
top: 550px;
left: 0px;
animation: moveleft 5s forwards;
}
@keyframes moveleft {
0%{}
100%{
top: 250px;
left: 400px;
transform: rotate(1800deg);
}
}
#right {
width: 150px;
height: 300px;
background-color: purple;
position: fixed;
top: 775px;
left: 1700px;
animation: moveright 5s forwards;
}
@keyframes moveright {
0%{}
100%{
top: 175px;
left: 700px;
transform: skewY(-45deg);
}
}
#dash1 {
width: 300px;
height: 300px;
position: fixed;
border-width: 0 0 2px 2px;
border-color: white;
border-style: dashed;
left: 550px;
top: 100px;
}
#dash2 {
width: 150px;
height: 0px;
position: fixed;
left: 400px;
top: 475px;
border-bottom: 2px dashed white;
transform: skewY(-45deg);
}
</style>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="dash1"></div>
<div id="dash2"></div>
</body>
</html>
上述代码，看上去相对比较复杂，其实仔细分析发现，无非就是基于上一节的实战项目代码，修改了DIV的初始位置，添加了三个关键帧动画而已，并且动画的最终100%的关键帧就是我们的上一节的立方体的初始位置。
传智的web前端培训课程一直紧随市场发展脚步，实时更新前沿、深度、覆盖面广的前端课程。
传智全新升级的前端与移动开发课程新增了大热的小程序+小游戏、人脸识别、机器学习、大数据可视化等前沿技术，还加入了前所未有的全终端大型项目，让学员通过一个大型项目掌握从需求到开发再到上线部署的各项技能，为学员高薪就业增加砝码。
更多的相关web前端培训课程请访问：http://www.itcast.cn/web/
| 
收藏
淘帖
踩
