css3属性过渡、2D、3D效果

一、过渡：transition: all 2s linear 1s; //执行渐变的属性、执行的时长、执行的曲线、延时执行的时长 ( ie9及其以前版本不支持 )

div{
　　width: 300px;
　　height: 300px;
　　background: red;
　　/*transition-property: all;
　　transition-duration:3s ;
　　transition-timing-function:linear;
　　transition-delay: 1s;*/
　　transition:all 2s linear 1s;
　　margin: 30px auto;
}
div:hover{
　　transform:rotate(360deg);
　　transform-origin: right bottom;//设置旋转元素的几点位置
　　/*skew(45deg,0)斜切*/
　　/*scale(1.5)缩放*/
　　/*rotate(3000deg)旋转*/
　　/*translate(20px, 20px)位移偏移*/
}

二、2D：

　　　　transform: translate(10px, 20px); (偏移复合写法)；   translateX(50px); (x轴方向偏移)；translateY(40px); (y轴方向偏移)；

　　　　transform: rotate(30deg); (旋转，单位是角度)；

　　　　transform: scale(2); （缩放）； transform: scale(2, 1.5); (x, y方向缩放倍数不同)；

　　　　transform: skew(45deg, 0); 翻转（斜切，倾斜，变形）；

三、3D：

　　

　　　　

<div>我是执行2d动画的盒子</div>