CSS3 - 2D位移
2019-03-20 本文已影响0人
Hyso
2D移动
// 沿 x 轴和 y 轴移动
transform:translate(x,y)
// 沿 x 轴移动
transform:translateX(x)
// 沿 y 轴移动
transform:translateY(y)
- 参数说明：
x：设置元素沿 x 轴水平移动，x 为正数时水平向右，x 为负数时水平向左
y：设置元素沿 y 轴垂直移动，y 为正数时垂直向下，y 为负数时垂直向上 - 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1, .box2 {
width: 200px;
height: 200px;
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 200px;
}
.box2 {
transform: translate(200px, 200px);
}
</style>
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
运行结果：
缩放/扩大元素
// 缩放/扩大元素宽高
transform: scale(x, y)
// 缩放/扩大元素宽
transform: scaleX(x)
// 缩放/扩大元素高
transform: scaleY(y)
- 参数说明：
x：设置元素宽度缩放/扩大的倍数，x 小于1时为缩放，大于1时为扩大。
y：设置元素高度缩放/扩大的倍数，y 小于1时为缩放，大于1时为扩大。 - 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1, .box2 {
width: 200px;
height: 200px;
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 200px;
}
.box2 {
transform: translate(200px, 200px) scale(0.5, 1.5);
}
</style>
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
运行结果：
旋转元素
transform: rotate(angle)
- 参数说明：
angle：设置元素旋转的角度，正数代表顺时针旋转，负数代表逆时针旋转。 - 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1, .box2 {
width: 200px;
height: 200px;
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 200px;
}
.box2 {
transform: translate(200px, 200px) rotate(45deg);
}
</style>
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
运行结果：
倾斜元素
// 沿 x 轴和 y 轴倾斜
transform: skew(x-angle, y-angle)
// 沿 x 轴倾斜
transform: skewX(x-angle)
// 沿 y 轴倾斜
transform: skewY(y-angle)
- 参数说明：
x-angle：设置元素沿 x 轴倾斜的角度，正数代表元素左边框与 x 轴形成的夹角为 x-angle，负数代表元素右边框与 x 轴形成的夹角为 x-angle。
y-angle：设置元素沿 y 轴倾斜的角度，正数代表元素下边框与 y 轴形成的夹角为 y-angle，负数代表元素上边框与 y 轴形成的夹角为 y-angle。 - 实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1, .box2 {
width: 200px;
height: 200px;
color: #FFFFFF;
font-size: 20px;
text-align: center;
line-height: 200px;
background-color: red;
position: absolute;
top: 100px;
left: 200px;
}
.box2 {
transform: translate(200px, 200px) skew(30deg, 30deg);
}
</style>
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
运行结果：
