过渡
width: 200px;
height: 200px;
border-radius:50% ;
background-color: yellow;
margin:400px 0 0 0;
/* position: absolute;
left:0px; */
/* 加上过渡效果 */
transition: transform 2s ease-in-out 0s;
}
body:hover div{
/* 自身的位置就是（0，0） */
/* translate是结合自身的位置 */
transform: translate(500px,-400px);
/* 相对于自身元素在body上的位置 */
/* margin-left:500px;
margin-top:0; */
/* left:500px; */
}
css3特效
*{margin:0;padding:0;}
div {
width: 500px;
height: 300px;
background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.jpxm.com%2Fuploadfiles%2F20171113%2F1510562435471260.jpg&refer=http%3A%2F%2Fwww.jpxm.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640919663&t=f1d489f0a8316585c4e4cedb12b8834a) no-repeat;
/* background-size第二个值不设置会变成auto */
background-size: 100% 100%;
/* 平移 */
/* transform: translateX(100px); */
/* 同时写会被下面的覆盖 */
/* transform: translateY(100px); */
/* 缩放 一个值表示x轴和y轴都是2 */
/* 缩放 一个值缩小的时候是从中心点缩小 */
/* transform: scale(2); */
/* scale(1)表示本身，不变 */
/* scale(0)表示缩小到消失 */
/* scale(.5) 小于1表示缩小 */
/* 只放大x轴 */
/* transform: scale(2,1); */
/* 只放大y轴 */
/* transform: scale(1,2); */
/* 倾斜 */
/* 度数的单位 deg */
/* skew第一个参数表示x轴 按照逆时针方向进行旋转 宽度变化，高度不变*/
/* skew第二个参数表示y轴 按照顺时针方向进行旋转 高度变化，宽度不变*/
/* transform: skew(60deg,0deg); */
/* transform: skewX(70deg); */
/* transform: skewY(30deg);
*/
/* 参数a单位使用deg表示
参数a取正值时元素相对原来中心顺时针旋转 */
/* 旋转 */
/* 沿着x轴旋转 会改变高度*/
/* transform: rotateX(30deg); */
/* 沿着y轴旋转 会改变宽度 */
/* transform: rotateY(30deg); */
/* rotate只设置一个值表示沿着中心点顺时针转 */
transform: rotate(30deg);
/*
rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状
*/
}
div:hover{
/* 起始点在屏幕的左上角 */
/* 两个参数，第一个表示x轴，第二个表示y轴 */
/* transform: translate(100px,100px); */
/* transform: translate(100px,0); *//* x轴距离左边100px */
/* transform: translate(0,100px); */
/* scaleX表示在x轴方向变大，高度不变 */
/* transform: scaleX(2); */
/* scaleY表示在y轴方向变大，宽度不变 */
/* transform: scaleY(2); */
}
</style>
</head>
<body>
<div></div>
</body>
