<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.img1:hover{
transition: linear 1s;
transform: translate(100px,100px);
}
.img2{
transition: linear 5s;
/* transform-origin: center 20px; */
}
.img2:hover{
transform: rotateY(3600deg);
}
.img3{
position: fixed;
left: 50%;
top: 40%;
margin-left: -300px;
}
.img3:hover{
transition: all .5s;
transform: scaleY(2);
}
.box{
width: 200px;
height: 300px;
border: 5px solid;
margin: 100px auto;
transition: all 1s;
}
.box:hover{
/* transform: ; */
transform: skewY(45deg) rotate(360deg);
}
</style>
</head>
<body>
<!-- <img class="img1" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.soogif.com%2FG11Gkd6hZpirkPWpt9R6iM1VSI4WgB0d.gif&refer=http%3A%2F%2Fimg.soogif.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670719231&t=dcaf275494ba2435a01ce34333ae6a08"/> -->
<!-- <img class="img2" src="https://img2.baidu.com/it/u=2407047898,3943448666&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=537" /> -->
<!-- <img src="https://t11.baidu.com/it/u=1363477112,181553523&fm=30&app=106&f=JPEG?w=640&h=260&s=58EEA844CBA647345EA4449C03005093" alt="" class="img3"> -->
<div class="box"></div>
</body>
</html>