一、过渡: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>