过渡动画
width: 200px;
height: 200px;
border-radius: 50%;
margin: 400px 0px;
background-color: greenyellow;
/* 加上过渡效果 */
transition: all 1s linear 0s;
/* 属性，动画时间，运动速度，延迟时间 */
/* linear 匀速 */
/* ease-in 慢速开始 */
/* ease-out 慢速结束 */
/* ease-in-out 慢速开始和结束 */
div:hover{
/* 自身的位置就是(0,0)*/
/* translate是结合自身的位置 */
transform:translate(500px,-200px);
}
位移缩放倾斜旋转
/* 2D位移，同时写会被下面的覆盖 */
/* 起始点在屏幕左上角 */
/* transform: translateX(100px);
transform: translateY(100px); */
/* 复合属性：第一个表示X轴第二个表示Y轴 */
/* transform: translate(100px,100px); *//* X轴距离左边100px */
/* 缩放属性 */
/* transform: scale(2); */
/* 1个值表示X和Y轴同时变化 ，2个值时X轴 和 Y轴 */
/* scale(.5) 代表缩小 */
/* 缩小的时候从中心点开始 */
/* scaleY(2) 沿Y轴变化，宽度不变 */
/* scaleX(2) 沿X轴变化，高度不变 */
/* scale(1) 代表本身，不变化 */
/* scale(0) 代表缩小到消失*/
/* 倾斜属性 */ /* 倾斜角度单位：deg */
/* transform: skew(20deg,0deg); */
/* 第一个值代表X轴，逆时针方向旋转 宽度变化，高度不变*/
/* 第二个值代表Y轴，顺时针方向旋转 高度变化，宽度不变*/
/* 旋转属性 */ /* 旋转角度单位：deg */
/* transform: rotateX(15deg); */
/* 沿着X轴旋转 会改变高度*/
/* transform: rotateY(15deg); */
/* 沿着Y轴旋转 会改变宽度*/
transform: rotate(30deg);
/* 只设置一个值，表示沿着中心点顺时针转，不改变 */
....
css3
transform 变形
transform:translate()平移
transform:translatex(1px)x轴平移
transform:translatey(1px)y轴平移
同时写x轴和y轴的的话，会被下面的覆盖
复合属性：transform:translate(100px,100px)
缩放
transform:scale缩放
transform:scale(1) 一个值表示x轴y轴都是1（1表示不变）
transform:scale(0) 表示缩小到消失
ransform: scale(2,1) 放大x轴
transform: scale(1,2) 放大y轴
旋转
transform:rotatex（30deg）（沿着x轴旋转，改变高度）
transform:rotatey（30deg）（沿着y轴旋转，改变宽度）
复合属性：transform:rotate（30deg）（只能设置1个值）
倾斜
transform:skew倾斜
transform:skew（60deg，20deg）
第一个参数表示x轴，按照逆时针进行旋转；宽度变化，高度不变
第二个参数表示y轴，按照顺时针进行旋转；高度变化，宽度不变
