2D特效

1. 平移

  • 格式：transform: translateX(300px) translateY(400px);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D特效</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*平移*/
            transform: translateX(300px) translateY(400px);
            /*平移简写*/
            /*transform: translate(300px,400px);*/
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

2. 旋转

  • 格式：transform: rotateX(45deg) rotateY(45deg);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D特效</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*旋转*/
            transform: rotateX(45deg) rotateY(45deg) rotateZ(0deg);
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

3. 缩放

  • 格式：transform: scaleX(1) scaleY(2);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D特效</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*缩放：缩放倍数，可以为负值*/
            transform: scaleX(1) scaleY(2);
            /*缩放简写*/
            /*transform: scale(1);*/
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

4. 倾斜

  • 格式：transform: skewX(-45deg) skewY(0deg);
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D特效</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: red;
            /*倾斜*/
            transform: skewX(-45deg) skewY(0deg);
        }
    </style>
</head>
<body>
    <div>
        鲁家宝鲁家宝鲁家宝鲁家宝
    </div>
</body>
</html>

3D

  • perspective：定义视图距离（perspective:100px;），Z轴的移动不能超过视图的距离，perspective 属性只影响 3D 转换元素

  • 让子元素保留3D属性，其父元素必须有该行代码transform-style: preserve-3d;

  • 平移，旋转，缩放，倾斜同2D相似，多了一个Z轴