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去掉，动画依然从它初始的状态如下