HTML5 动画效果 ------ 旋转的小球、CSS旋转木马3D相册效果

css3实现动画效果

基本知识点：

Css3常用到的几个属性：transform（变形），transition（过渡），animation（动画）     

• transform

translate：平移，移动，水平方向、垂直方向（translateX，translateY，translateZ等）

scale：缩放；扩大缩小，水平方向、垂直方向（scaleX，scaleY，ScaleZ等）

rotate：旋转，单位为deg（角度，顺时针方向为正），默认沿中心点旋转（水平方向的1/2和垂直方向的1/2的交点）

transform-origin：默认为中心，值为 center center；可以为top left（沿着左上角旋转），bottom right（沿着右下角旋转），等等。也可以设置为百分数

skew：倾斜转换；扭曲，斜切，改变原来图形，单位也是deg（skewX，skewY等）

• transition

transition：过渡的属性名 过渡时间  过渡模式（可以有多个属性，多个值）

过渡模式有 linear（匀速）、ease（缓慢-加快-缓慢）、ease-in（缓慢-加快；慢速开始）、  ease-out（加快-缓慢；慢速结束） 、ease-in-out（缓慢开始和结束）

例如， transition: width 3s,height 3s,background 3s;

等价于 transition: all 3s;

 制作动画效果思路：先定义一个动画，然后将他赋给某个值

逐帧动画：每一帧或者每几帧发生一次变化

@keyframes用于定义一个动画

 下面我写了一个简单的案例，实现不断旋转运动的球体：

 效果图：

第二个案例是我做的一个3D旋转木马相册效果

鼠标触碰某张图片，相册停止运动，具体实现看代码：