<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
border: 1px solid red;
width:160px ;
height: 185px;
overflow: hidden;
}
img{
/*transform: translate(500px,100px);*//*平移*/
/*transform: scale(1.5);*//*缩放*/
/*transform: skew(20deg);*//*倾斜*/
/*transform: rotatey(70deg); */ /*旋转**/
}
img{
transition: all 1.2s ease;
}
img:hover{
/*transform: rotatey(180deg);*/
transform: scale(1.8);
}
</style>
<title>Transform</title>
</head>
<body>
<div>
<img src="../ws1/img/f3_Android1.png">
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
border: 1px solid red;
width:160px ;
height: 185px;
overflow: hidden;
}
img{
/*transform: translate(500px,100px);*//*平移*/
/*transform: scale(1.5);*//*缩放*/
/*transform: skew(20deg);*//*倾斜*/
/*transform: rotatey(70deg); */ /*旋转**/
}
img{
transition: all 1.2s ease;
}
img:hover{
/*transform: rotatey(180deg);*/
transform: scale(1.8);
}
</style>
<title>Transform</title>
</head>
<body>
<div>
<img src="../ws1/img/f3_Android1.png">
</div>
</body>
</html>