一、动画效果
1、Transform属性
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。
2、animation动画属性
语法：
animation：（ animation-name animation–duration animation-timing-function animation-delay animation-iteration-count animation-direction）
下面让我们来看一下，这些值分别代表什么意思：
| 值 | 说明 |
| animation-name | 由@keyframes创建的动画名称 |
| animation–duration | 动画需要多少秒完成 |
| animation-timing-function | 过渡方式（linear、ease、ease-in、ease-out、ease-in-out） |
| animation-delay | 延迟时间 |
| animation-iteration-count | 动画的播放次数（值通常为整数，默认值为1；特殊值infinite，表示动画无限次播放） |
| animation-direction | 动画的播放方向（normal：动画每次都是循环向前播放；alternate：动画播放为偶数次则向前播放） |
下面用一个小练习演示一下：
小气球
代码如下：
二、3D效果
要想实现3d效果，必须要在父元素上加上一个perspective属性
1、translate3d （X,Y,Z）分别表示x轴距离，y轴距离和z轴距离；但是也可以单独设置translateZ
translate
2、rotateX：rotateX是绕着X轴旋转，正值是向上面旋转，负值是向下面旋转
rotateY： rotateY是绕着Y轴旋转，正值是向右边旋转，负值是向左边旋转
rotateZ：tateZ是绕着Z轴旋转,正值是绕着中心点顺时针旋转，负值是绕着中心点逆时针旋转
旋转
3、transform-sty
如果想让子元素有3D效果，必须给父元素设置transform-style属性
设置旋转后的上下位置，给子元素设置transform-origin属性
穿透
