如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose
来源：懂视网
责编：小采
时间：2020-11-27 16:29:24
如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose
如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose:首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错，这个炫酷的效果都是用css3实现的。 下面是动画实现所需要用到的几个css3属性。 1、perspective：用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景，即
导读如何制作css3的3d动画--以骰子旋转为例，详解css3动画属性_html/css_WEB-ITnose:首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5 6 你没看错，这个炫酷的效果都是用css3实现的。 下面是动画实现所需要用到的几个css3属性。 1、perspective：用来实现一个3d的场景 写3D效果的第一步是要创建一个3D场景，即
首先先来看两个用css3实现的炫酷的3d动画效果
1
2
3
4
5
6
你没看错，这个炫酷的效果都是用css3实现的。
下面是动画实现所需要用到的几个css3属性。
1、perspective：用来实现一个3d的场景
写3D效果的第一步是要创建一个3D场景，即索要实现效果的模块。这里用到了 perspective 属性和 perspective-origin 属性。
perspective：用来定义3d动画距离浏览器的距离，单位是（px）。 perspective-origin：效果渲染的视角，告诉浏览器我们观看的角度，一般为 center 或 50% 50%，意为 居中。 transform-style：preserve-3d 来告诉浏览器之后要进行的transform的操作都是对一个3D的世界进行的。
2、transition：用来写动画的过度效果
transition 用来实现过度的效果，使动画不至于太过生硬。这是一个复合属性，分别有以下几个属性：
transition-property：过度或动态模拟的css属性，对应的属性有：宽度（width）、高度（height）、边框（border）、绝对定位的上下左右值、外边距（margin）、内边距（padding）、文字阴影（text-shadow）、z-index等。 transition-duration：完成过度所需的时间 transition-timing-function：指定过度函数，函数包括 ease（默认值，速度由快到慢，主见变慢）、linear（匀速）、ease-in（速度越来越快，加速，渐显效果）、ease-out（速度越来越慢，减速，渐隐效果）、ease-in-out（先加速，再减速，渐显渐隐效果） transition-delay：指定开始出现的延迟时间，即过渡效果开始执行的时间。
3、transform：用来实现翻转、角度的转换
transform 同样是个复合属性，用来实现各种转换效果，分别有以下几个属性：
translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 translateX/Y/Z 定义转换，分贝用 X、Y、Z 轴的值。 scale(x,y) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX/Y/Z 通过设置 X、Y、Z 轴的值来定义缩放转换，若为Z轴，则定义的是3D旋转。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX/Y 定义沿着 X、Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图 下面介绍下一个简单的骰子的写法
1、创建一个3D场景
这里使用了perspective 和perspective-origin 两个属性，定义了3D动画的距离是800px，居中显示的。这里借用一张慕课网的图片，来查看这两个属性的确切含义。 我们在3D场景里面定义了一个类名为dice的div，这里是我们写这个骰子的外层包裹的div，我们给他定义好宽和高，并让他居中显示。 骰子的六个面我们分别用六个div（其他块级元素也可以）来实现，会用到定位，我们这里给.dice 定义为相对定位。 我们给我们这个骰子的包裹div，加上了transform-style: preserve-3d这个样式，是要告诉浏览器之后要进行的transform的操作都是对一个3D的世界进行的。
