首先,我们来看一下今天我们使用3D变形要实现的两种3D空间效果:
第一种不带特效处理的"魔方":
如下图所示:
接着我们看下稍做特效处理之后的一种效果:(此处因生成gif动态图,所以,效果看起来比网站投射出来的效果要差些,在桌面端运行就不会有问题了);
如下图所示:
有没有觉得三维空间3D立体效果很炫呢?带着疑问,我们一块来看一下实现思路吧!
首先,我们来学习几个3D变形当中的几个属性知识点;学习3D效果之前,我们来看一张三维空间图片,这是一张三维空间的基本图,分别有x轴、y轴、z轴三个方向;
3D平移 translate
3D平移分别有三个方向:
第一个方向:translateX(x) 定义 3D 转化,仅使用用于 X 轴的值,以X轴平移;
看下代码中所示,例如我们创建了一个div标签(我们在div上添加一行字,叫做"我是文字",方便待会儿查看角度),然后设置其属性为:
然后,我们来看一下3D平移,该场景下的运行效果(注意:主要看下鼠标滑到div上时的一个平移效果);
第二个方向:translateX(Y) 定义 3D 转化,仅使用用于 Y 轴的值,以Y轴平移;这个和以X轴方向差不多,也就是上下平移,如果平移的负值,则往Y轴的负方向,也就是往下平移,反之,向上平移(这个地方就不做图解演示说明);
第三个方向:translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值,以Z轴平移;对于这个角度的值,就得有三维空间的想象力了,那么,往Z周的正方向来平移,也就是相当于与我们眼睛目视前方的距离越来越近;做个实例,我们来看一下;我们还是使用上面这个已经创建好的div标签,稍作修改,看下效果;
注意:在使用translateZ平移时,一定要定义一个透视点作为参照物以及开启3D视图;
同样,我们来看一下3D平移,该场景下的运行效果(注意:主要看下鼠标滑到div上时的一个距离我们越来越近的平移效果 Z轴正方向);
3D旋转 rotate
rotateX(angle) 定义沿 X 轴的 3D 旋转。
同样,我们还是以上面这个div为例,只需要将里面的transform部分修改为rotateX,沿X轴旋转;(只看修改代码的部分)
我们来看下沿X轴旋转的效果;
rotateY(angle) 定义沿 Y 轴的 3D 旋转。(这个只需要将上面代码中的rotateX修改为rotateY即可,我们看下沿Y轴旋转的效果);
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。(这个只需要将上面代码中的rotateY修改为rotateZ即可,我们看下沿Z轴旋转的效果)注意:Z轴的空间是哪个角度;
ok,学完了3D平移和3D旋转属性之后,我带着大家一块实现一下"魔方";
首先,我们需要创建6个div标签,代表魔方的六个面,记得在底部嵌套两个div,便于待会儿做旋转使用;
然后,设置各个div的相关属性,注意:因为要使用到往Z轴平移,所以,记得开启3D视图;
接着,设置"魔方"的几个面自己的属性,也就是各个面小div的属性;先设置三个面看看效果;同时让六个div上一个的div发生旋转角度,便于我们观看;
效果如下图所示:
写到这儿,已经有了立体空间的感觉了......我们接着把其余三个面也给补上,看看效果;
效果如下图所示:
我们需要在"魔方"每个面div里嵌套一个img标签,用来显示图片即可,看下效果;
接着,我们需要让其最底部的div沿Y轴方向旋转,看看效果;
最后,我们添加截取div边框圆角的属性,以及设置阴影发光颜色,将大功告成了!
最终效果如下:
联系客服