1,translate
语法:translate: transform(x, y);
从当前位置,向下移动x距离,向右移动y距离,x和y可以是百分比,允许负值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2,rotate()
给定一个度数,顺时针旋转,负值是逆时针旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 100px;
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3,scale()
指定改元素变大或缩小的倍数
4,skew()
包含两个参数值,分别表示x轴和y轴倾斜的角度,允许负值,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CSS3</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
margin: 50px;
width: 100px;
height: 100px;
background-color: rgba(255, 0, 0, .5);
transform: skew(0deg, 0deg);
}
</style>
</head>
<body>
<div>
This is a div label
</div>
</body>
</html>
参考文章:https://www.runoob.com/css3/css3-2dtransforms.html