5.3 CSS3 2D转换
5.3 CSS3 2D转换
2D转换方法：对元素进行旋转、缩放、移动、拉伸
主要使用transform属性，它的不同的取值采用不同的函数，就可以完成不同的效果。
rotate（deg）；函数，旋转效果。
transform：scale（x,y）；函数。放大或缩小效果。
transform：rotate（deg）；
transform：rotate（deg）；
将 rotate（）函数设置为transform属性的取值，rotate（deg）中带有的参数deg是旋转的角度，单位是degree，需要设置的参素的值可以是正值，也可以是负值，如果是正值就是顺时针地进行旋转，如果是负值就是逆时针地进行旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D旋转</title>
<style>
div{
width: 100px;
height: 75px;
background-color: #ccc;
border: 1px solid;
}
.rotateDiv{
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>web前端开发</div>
<div class="rotateDiv">web前端开发</div>
</body>
</html>
第一个盒子正常显示，第二个盒子时旋转30度之后的效果。
transform：scale（x,y）；
transform：scale（x,y）；将 scale（）函数设置为transform属性的取值，scale（x,y）h函数可以设置水平方向和垂直方向上的两个值，x：水平方向缩放的倍数，y：垂直方向的缩放倍数，若省略，则和x的值相等。x和y的取值在0-1之间，表示缩小，>1表示放大。
我们可以利用这个属性来设置当鼠标悬停在图片上有一个放大的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D旋转</title>
<style>
img{
width: 100px;
height: 100px;
}
img:hover{
transform: scale(1.5);
}
</style>
</head>
<body>
<img src="images/ifeng.png" alt="">
</body>
</html>
