CSS3动画属性

　　Part One

     transition: <过渡属性名称> <过渡时间> <过渡模式>
     transition:property duration timing-function delay
     transition: color 1s ease
               transition-property: color                 //规定过渡效果的CSS属性名称
               transition-duration: 1s                     //规定过渡需要多少秒
               transition-timing-function: ease        //规定速度效果的速度曲线
               transition-delay:                              //定义过渡时间核实开始

 

 过渡模式包括:
     ease 缓慢开始 缓慢结束(默认)
     linear 匀速 
     ease-in 缓慢开始
     ease-out 缓慢结束
     ease-in-out 缓慢开始，缓慢结束(和ease稍有区别)

多个属性的过渡效果         

1 transition: <属性1> <时间1>, <属性2> <时间2>         

2 transition: <属性1> <时间1>              

transition: <属性2> <时间2>

Part Two -- 使用CSS3创建简单的3D场景

 

 设置3D场景
          -webkit-perspective: 800  //
          -webkit-perspective-origin: 50% 50% 从窗口中间看过去

 

 

     使用transform属性调整元素 -webkit-transform-style: -webkit-preserve-3d(告诉浏览器使用的是3D设置)

translate -- 位移
   translateX(x px)
   translateY(y px)
   translateZ(z px)

 

rotate -- 旋转角度

     rotateX(x deg)
     rotateY(y deg)
     rotateZ(z deg)

 

 

使用transform-orgin属性调整旋转中心
       x轴
            left center right
       y轴
            top center bottom
       z轴
            length px        

 

Part Three -- CSS3:Transform

     rotate(angle):定义2D旋转
     rotateX(angle):定义沿着X轴的3D旋转
     rotateY(angle):定义沿着Y轴的3D旋转
     rotateZ(angle):定义沿着Z轴的3D旋转
     scale(x, y):定义2d缩放
     scale3d(x,y,z):定义3D缩放
     scaleX(x):通过设置X轴的值来定义缩放转换
     scaleY(y):通过设置y轴的值来定义缩放转换
     scaleZ(z):通过设置z轴的值来定义缩放转换

 

Part Four -- CSS3:box-sizing

box-sizing属性允许以特定的方式定义匹配某个区域的特定元素
     box-sizing:content-box | border-box | inherit
     content-box(默认值)
          宽度和高度分别应用到元素的内容框,在高度和宽度之外绘制元素的内边距和边框
     border-box
          通过已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度,一般最终结果就为元素所设置的height值
     inherit
          规定应从父元素集成box-sizing属性