首先先来看两个用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的世界进行的。