transform各属性的定义：
translate/translateX/translateY：在水平、垂直或者两个方向上平移元素。
scale/scaleX/scaleY：在水平、垂直或者两个方向上缩放元素。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
div{
border: 1px solid red;
width: 160px;
height: 185px;
overflow: hidden;/*把图片放大的部分隐藏*/
}
/* img{
transform: translate(350px,100px); !*从左上角开始按X、Y轴移动
transform: scale(1.5); !*把图片放大为原来的1.5倍
transform: scaleX(1.5); !*X方向上改变
transform: scaleY(1.5); !*Y方向上改变
transform: skew(20deg); !*倾斜20度
transform: rotate(90deg); !*旋转90度
}*/
img{
transition: all 1.2s ease;/*对所有的属性添加过度效果*/
}
/*transition、transform是分离的*/
img:hover{
/*transform: rotateY(180deg);*/
transform: scale(1.5);/*图片放大*/
}
</style>
<title>transform</title>
</head>
<body>
<div>
<img src="../../img/Android1.png" alt="">
</div>
</body>
</html>
![web前端布局练手项目[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)