<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
ul
{
width: 800px;
height: 500px;
border: 1px solid red;
margin: 0px auto;
}
ul li
{
list-style: none;
width: 100px;
height: 50px;
background-color: red;
margin: 0px auto;
text-align: center;
line-height: 50px;
margin-top: 50px;
}
ul li:nth-child(2)
{
/*其中deg是单位, 代表多少度*/
transform: rotate(45deg);
}
ul li:nth-child(3)
{
/*
第一个参数:水平方向
第二个参数:垂直方向
*/
transform: translate(100px,0px);
}
ul li:nth-child(4)
{
/*
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
*/
transform: scale(1.5);
}
ul li:nth-child(5){
/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
*/
transform: rotate(45deg) translate(100px,0px) scale(1.5);
}
</style>
</head>
<body>
<ul>
<li>正常的</li>
<li>旋转的</li>
<li>平移的</li>
<li>缩放的</li>
<li>综合的</li>
</ul>
</body>
</html>
transform集合
最新推荐文章于 2024-01-14 17:19:25 发布
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
