1. 内容
这里主要介绍旋转和缩放属性
2. 旋转transform:rotate()
用法为:transform:rotate( *deg),其中*表示数字,数字为正顺时针旋转,为负逆时针旋转,webstorm可用trsf快速扩展;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 75px;
width: 100px;
border: 2px solid #a1a1a1;
background: #ddd;
}
#rotate{
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>web前端开发</div>
<div id="rotate">web前端开发</div>
</body>
</html>
3. 缩放transform:scale()
当scale内只有一个数字时表x,y同时放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 300px;
height: 300px;
border:1px solid;
margin:50px auto;
}
.box:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class = "box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore iusto facilis nihil voluptatibus, nobis corrupti quae ipsum possimus dolorum, repudiandae unde illum nemo quibusdam tempora fuga nisi? Eius, enim, minima?
</div>
</html>
左图为鼠标为悬停时,右图为鼠标悬停时的放大效果