CSS3动画学习（过渡，旋转，缩小，倾斜）

过渡transition

为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript也能产生动画效果3

 	
  transform: translate(30px, 50px)	  		 
    
		 transform: scale(0.5)					
    
		 rotate(360deg)							
    
 		 transform: skew(30deg)						

 .box {
            width: 200px;
            height: 200px;
            background-color: bisque;
            margin: 100px;
            // 设置all 所有的样式属性都会变化在一秒之内,linear匀速、ease慢快慢、ease-in慢速开始、ease-out慢速结束、ease-in-out慢速开始和结束
            、、
            transition: all 1s ease;
            //设置形变沿着某个点形变，默认 center center 、可修改为exp:top left....左上角  位置没有上下先后顺序
            transform-origin:  bottom left;//也可以给 像素 精确绕点旋转
            
        }
        角度可以设置正负改变方向
        .translate {
        	//移动的我做出来只按照最后一个沿着Y轴平移，要是想X,Y都有平移要写成  transform: translate(30px，30px);
            transform: translateX(30px);
            transform: translateY(30px);
        }
        .scale:hover{
            transform: scale(0.5);
            /* 内部元素也会缩小 */
        }
        .rotate:hover{
            transform: rotate(360deg)
        }
        .skew:hover{
            transform: skew(30deg)
        }

perspective 透视 设置元素被查看位置的视图

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

    

        
....