CSS3 - 2D位移

作者: Hyso | 来源:发表于2019-03-20 14:45 被阅读0次

CSS3-形变、动画
CSS3 - 2D位移
css3 2d和3d区别
2019-06-11
2D转化
CSS3 2D转换
CSS3的transform 转换
CSS 2D 转换
html5和css3新特性之图形变换
css3 基础

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>

运行结果：