您的位置：首页 > Web前端 > CSS

CSS-26.2D转换-transform属性

2018-01-30 09:28 274 查看

2D转换时指旋转，平移，缩放及其组合
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
margin: 0 auto;
height: 500px;
width: 500px;
border: 1px solid #000;
}
li{
width: 100px;
height: 40px;
background-color: #5e5e5e;
list-style: none;
text-align: center;
line-height: 40px;
margin: 0 auto;
margin-bottom:70px;
}
li:nth-child(2){
transform: rotate(45deg);
}
li:nth-child(3){
transform: translate(100px,30px);
}
li:nth-child(4){
transform: scale(1.5,1.5);
}
li:nth-child(5){
transform:rotate(45deg) translate(100px,30px) scale(1.5,1.5);
}
</style>
</head>
<body>
<ul>
<li>正常</li>
<li>旋转</li>
<li>平移</li>
<li>缩放</li>
<li>综合使用</li>
</ul>
</body>
</html>
transform: rotate(45deg);是指将顺时针旋转45度
transform: translate(100px,30px);在块元素上存在一个坐标系，水平平移100px，垂直向下平移30px
transform: scale(1.5,1.5);缩放，有两个值，当两个值相同时，写一个即可，水平缩放和垂直缩放。
注意点：当元素旋转了，再平移的时候，坐标系也会进行平移。当我们既要平移也要旋转时，要考虑位置，可以将translate写在rotate的前面。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航