过渡动画
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);
/* 只设置一个值，表示沿着中心点顺时针转，不改变 */
