3D骰子模型

3D骰子模型

开发工具与关键技术：前端

作者：盘子

撰写时间：2019年2月9日

Css3动画不但在原来的基础上新增了变形和动画相关属性，而且通过这些属性更简便的实现想要的动画效果，给我们带来很大的简便。Css3提供两个主要的动画——transition动画和animation动画，而这两个动画里又有多个不同属性，每个不同相关属性都有其不同的实现效果。现在来看下面用一个小案例讲讲transition动画的实现效果，见源代码如下图：
如图我们可以看到源代码部分也不多，用一个大的盒子装着几个小的盒子。Transition动画比较简单，指定html组件所需动画效果执行变化的属性和动画时间，即可保证动画的播放。而style样式部分代码见截图如下
如图中，设置整个背景颜色为黑色，其它都设置了相关的基本样式。这次主要使用transform这个属性建立一个3D空间，如图中画红线的句子。transform属性用于设置变形，该属性支持一个或多个变形函数。3D变换基于preserve-3d,perspective,translatez；这几个属性。
transform-style(preserve-3d)建立3D空间，perspective视镜，perspective-origin视镜基点
如这里把transform-style:preserve-3d去掉，动画依然从它初始的状态如下面效果图（图1）开始运动，但只是个平面动画效果即图中五个绿色圆圈一定空间内的旋转运动，并无法达到如图2中的3D立体视果。或把transform:rotate3d(1,1,1,1360deg)和animation两者中的任何一句去掉，动画依然保持初始状态，即动画效果无法实现。
transform设置变形中的又一个属性——原点
transform-origin即任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。
在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对元素进行原点位置改变，使元素原点不在元素的中心位置，以达到需要的原点位置。用法如上图中画红线的句子，效果如下面图2所示（即其原点在默认位置处经过重置得到）。
下面是最后所实现的3D效果，见截图如下面效果图图3。通过rotate()旋转函数是指定的角度参数使元素相对原点进行旋转，即设置一个角度值，用来指定旋转的幅度。而图中五个圆形的3D骰子模型在一定的运动空间内绕着指定的旋转幅度做旋转运动。
效果图：