前台css打造炫酷3d立方体特效
一个三维物体(一个长方体)，它围绕着一个轴旋转。我已经有过少量与css 3d一起工作的经验，并且我脑海里开始出现了一个处理方案。我搜索了像“css 3d立方体”这样的关键词来确认我的想法。
对技术感兴趣的朋友能私信小编“学习”，领取精品的前台免费学习课程视频，同时我将为您分享精品资料。
我会在评论中发出我前台学习qun，加入就可免费领取详细代码和更多的学习资料。
接下来是我处理问题的具体过程：
削尖轴
让我提示你关于浏览器轴的事情。不是战争轴心，而是数字线路.。在三维笛卡尔坐标系中，我们都学到了同样的轴。
三维空间的笛卡尔坐标系是一对垂直的直线(轴)的有序三重奏，所有三个轴都有一个长度单位，每个轴都有一个方向。
维基百科：笛卡尔坐标系
下图显示了如何在浏览器中指向轴。
一种直角坐标系，它指向观察者。(图像信誉：维基百科)
x轴是水平的，y轴是垂直的，z轴从屏幕内出来。z轴零点值位于屏幕的平面上。记住这个事实。
理清视角
要创立一个3D对象，我需要一个带有透视图的元素(让我们称之为“场景”)。透视图是场景的深度，它取决于它包含的对象的大小。
.scene { perspective: 800px;}假如透视图太小，物体就会被扭曲。假如它太大，3D效果就会减少到零。
此外，场景中的所有对象只有一个视角。而三维效应则取决于视点位置。
那么，如何计算视角呢？我发现它取决于转动轴。对于x轴来说，它是一个高度值乘以4，它适合，对于y轴-宽度值乘以4。这是我的魔术公式：
const perspective = dimension * 4;
从各方考虑
在确定透视图之后，我开始创立一个3D对象。我选择了一个立方体，由于它是简单的和可预测的。多维数据集元素是一个有宽度和高度定义的正则div(例如，200px并用相对定位。它通过以下方式转换成一个3d对象transform-style属性的属性preserve-3d.。它告诉浏览器根据3d世界的规则呈现所有嵌套元素。
在我的例子中，立方体有六个divs(“边”)，绝对定位。类名对应于侧(后、左、右、上、下、前)的初始位置。以下是标记：
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台css打造炫酷3d立方体特效
