前台css打造炫酷3d立方体特效

作者 : 开心源码 本文共868个字,预计阅读时间需要3分钟 发布时间: 2022-05-11 共105人阅读

一个三维物体(一个长方体),它围绕着一个轴旋转。我已经有过少量与css 3d一起工作的经验,并且我脑海里开始出现了一个处理方案。我搜索了像“css 3d立方体”这样的关键词来确认我的想法。

对技术感兴趣的朋友能私信小编“学习”,领取精品的前台免费学习课程视频,同时我将为您分享精品资料。

我会在评论中发出我前台学习qun,加入就可免费领取详细代码和更多的学习资料。

接下来是我处理问题的具体过程:

削尖轴

让我提示你关于浏览器轴的事情。不是战争轴心,而是数字线路.。在三维笛卡尔坐标系中,我们都学到了同样的轴。

三维空间的笛卡尔坐标系是一对垂直的直线(轴)的有序三重奏,所有三个轴都有一个长度单位,每个轴都有一个方向。

维基百科:笛卡尔坐标系

下图显示了如何在浏览器中指向轴。

前台css打造炫酷3d立方体特效

一种直角坐标系,它指向观察者。(图像信誉:维基百科)

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立方体特效

发表回复