transform:变形
旋转
transform: rotate(30deg);正方向:顺时针
缩放
transform: scale(0.6);0-1 缩小,1-无穷 放大
斜切 (水平,垂直)
transform: skew(50deg,0);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变形</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 172px;
border: 1px solid #000000;
}
/*transform:变形
旋转
transform: rotate(30deg);正方向:顺时针
*/
.box img{
/*图片去掉空隙*/
display: block;
width: 172px;
/*过度一般配合其他属性使用
属性 时间 缓冲描述 延迟
*/
transition: all 2s linear 0s;
}
.box:hover img{
/*旋转*/
transform: rotate(30deg);
}
.box2{
width: 172px;
margin-top: 20px;
height: 211px;
/*溢出隐藏*/
overflow: hidden;
}
/*缩放
transform: scale(0.6);0-1 缩小,1-无穷 放大
*/
.box2:hover img{
/*缩小0-1*/
transform: scale(0.6);
/*放大1-无穷*/
transform: scale(1.6);
}
.box3{
margin-top: 30px;
height: 211px;
/*溢出隐藏*/
overflow: hidden;
}
.box3:hover img{
/*斜切 (水平,垂直)*/
transform: skew(50deg,0);
transform: skew(0,50deg);
}
</style>
</head>
<body>
<div class="box">
<img src="image/5.png">
</div>
<div class="box box2">
<img src="image/5.png">
</div>
<div class="box box3">
<img src="image/5.png">
</div>
</body>
</html>