CSS变换

m0_63165331

于 2024-07-14 12:36:02 发布

阅读量420

点赞数 6

文章标签： css 前端 2D变换 3D变换 CSS动画

本文链接：https://blog.csdn.net/m0_63165331/article/details/140415240

版权

1. 2D变换

1.1 2D位移

2D 位移可以改变元素的位置，需要先给元素添加转换属性:transform,然后再编写具体的值，可选值如下：

**translateX：**设置水平方向位移，需指定长度值；若指定的是百分比，是参考自身宽度的百分比。
**translateY：**设置垂直方向位移，需指定长度值；若指定的是百分比，是参考自身高度的百分比。
translate: 如果写一个值，代表水平方向。如果写两个值，第一个代表水平方向，第二个代表垂直方向。

如下代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D位移</title>
    <style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: aliceblue;
        }
        .inner{
            height: 100px;
            width: 100px;
            background-color: red;
            /* 2D位移 */
            transform: translate(50px,100px);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

效果如下:

2D位移注意点：

位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
与相对定位的区别：相对定位的百分比值，参考的是其父元素；位移的百分比值，参考的是其自身。
浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
transform 可以链式编写，例如：transform:translateX(50px) translateY(50px)
位移对行内元素无效,如果要行内元素位移，给行内元素添加，display:block

位移配合相对定位，可实现元素水平垂直居中。如下代码：

position: relative;
left: 50%;
top:50%;
transform: translate(-50%,-50%);

1.2 2D缩放

2D 缩放可以改变元素大小，需要先给元素添加转换属性:transform,然后再编写具体的值，可选值如下：

**scaleX:**设置水平方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。

**scaleY:**设置垂直方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。

**scale:**同时设置水平方向、垂直方向的缩放比例，一个值代表同时设置水平和垂直缩放；两个值分别代表：水平缩放、垂直缩放。

如下代码示意，一个大盒子里面放两个小盒子，两个小盒子尺寸一致，但是其中一个设置了2D缩放，就产生如下效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2D缩放</title>
    <style>
        .outer{
            height: 400px;
            width: 400px;
            background-color: aliceblue;
            padding: 10px;
        }
        .inner{
            height: 100px;
            width: 100px;
            background-color: green;
            margin: 10px;
        }
        .inner1{
            transform: scale(1.1);
            
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
    </div>
</body>
</html>

1.3 2D旋转

2D 旋转可以让元素在平面内旋转，需要先给元素添加转换属性:transform,然后再编写具体的值，可选值如下：

**rotateZ：**设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。

**rotate：**只设置一个值，与rotateZ一致，设置多个值为3D旋转，具体详见后面章节。

1.4 多重变换

多个变换可以写在一个tranform里，如下所示：

transform: translate(50%,100%) scale(1.1) rotate(45deg)

注意：rotate旋转会改变坐标，因此一般把rotate放在最后。

1.5 变化原点

元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。

transform-origin: 50% 50% /*变换原点在元素的中心位置，百分比是相对于自身。—— 默认值*/

修改变换原点对位移没有影响，对旋转和缩放会产生影响。
如果提供两个值，第一个用于横坐标，第二个用于纵坐标。

transform-origin: left top /*变换原点在元素的左上角 。*/
transform-origin: 50px 50px /* 变换原点距离元素左上角 50px 50px 的位置。*/

如果只提供一个，若是像素值，表示横坐标，纵坐标取 50% ；若是关键词，则另一个坐标取 50%。

transform-origin: 0 /*只写一个值的时候，第二个值默认为 50% 。*/

2. 3D变换

2.1开启父元素的3D空间

如果让元素进行3D变换，必须让父元素先开启3D空间，否则没有效果。

使用**transform-style:preserve-3d**开启 3D 空间。

2.2 给父元素设置景深

如果想要看到3D变换的效果，还需要给父元素设置景深，否则看不出效果。

使用**perspective**设置景深，它的值为不小于0的数值。

2.3 透视点位置

默认透视点位置为元素的中心，一般不需要设置透视点位置。

如果要设置可使用**perspective-origin **来设置，它的值有两个，第一个用于横坐标，第二个用于纵坐标。

2.4 3D位移

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，需要先给元素添加转换属性:transform,然后再编写具体的值，可选值如下：

**translateZ：**设置 z 轴位移，需指定长度值，正值向屏幕外，负值向屏幕里，且不能写百分比。

**translate3d：**第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，且均不能省略。

2.5 3D旋转

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，需要先给元素添加转换属性:transform,然后再编写具体的值，可选值如下：

**rotateX：**设置 x 轴旋转角度，需指定一个角度值( deg )，面对 x 轴正方向：正值顺时针，负值逆时针。
**rotateY：**设置 y 轴旋转角度，需指定一个角度值( deg )，面对 y 轴正方向：正值顺时针，负值逆时针。
**rotate3d：**前 3 个参数分别表示坐标轴： x , y , z ，第 4 个参数表示旋转的角度，参数不允许省略。

例如： transform: rotate3d(1,1,1,30deg) ，意思是： x 、 y 、 z 分别旋转30 度。

2.6 3D 缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，需要先给元素添加转换属性:transform,然后再编写具体的值，可选值如下：

**scaleZ：**设置 z 轴方向的缩放比例，值为一个数字， 1 表示不缩放，大于 1 放大，小于 1 缩小。

**scale3d：**第1个参数对应 x 轴，第2个参数对应 y 轴，第3个参数对应 z 轴，参数不允许省略。

2.7 多重变换

多个变换可以写在一个tranform里，如下所示：

transform: translateZ(50px) scaleZ(2) rotateY(30deg);

2.8 背部可见性

使用 backface-visibility 指定元素背面，在面向用户时是否可见，常用值如下：

**visible ：**指定元素背面可见，允许显示正面的镜像。—— 默认值

hidden ： 指定元素背面不可见。

2.9 3D变换综合练习案例

如下代码：

<!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>
        .outer{
            background-color: rgb(231, 231, 231);
            height: 400px;
            width: 500px;
            overflow: hidden;

            /* 开启3D空间 */
            transform-style: preserve-3d;
            /* 设置景深 */
            perspective: 400px;

        }
        .inner{
            height: 100px;
            width: 100px;
            /* background-color: brown; */
            background-size: cover;
        }
        .inner1{
            background-image: url("https://www.umei.cc/d/file/20230822/35f17b7cbcd2551208bf7bf4c1761207.jpg");
            /* 3D变换 */
            transform: translate(30px,150px) scale(0.8) rotateY(50deg);
        }
        .inner2{
            background-image: url("https://www.umei.cc/d/file/20230907/b2619d00d56285ca20132a84ebe63913.jpg");
            /* 3D变换 */
            transform: translate(100px,50px) scale(1.0) rotateY(80deg);
        }
        .inner3{
            background-image: url("https://www.umei.cc/d/file/20230907/f43b21d30b87c27c9351c4d11111484a.jpg");
            /* 3D变换 */
            transform: translate(200px,-50px) scale(1.2);
        }
        .inner4{
            background-image: url("https://www.umei.cc/d/file/20230901/3922c4fb1536b09bd7f6f251b6f94259.jpg");
            /* 3D变换 */
            transform: translate(300px,-150px) scale(1.0)  rotateY(-80deg);
        }
        .inner5{
            background-image: url("https://www.umei.cc/d/file/20230907/87fe5b297653f08a4aabd904a123adc2.jpg");
            /* 3D变换 */
            transform: translate(370px,-250px) scale(0.8) rotateY(-50deg);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner inner1"></div>
        <div class="inner inner2"></div>
        <div class="inner inner3"></div>
        <div class="inner inner4"></div>
        <div class="inner inner5"></div>
    </div>
</body>
</html>

效果如下：

3.动画

3.1定义关键帧

CSS使用动画，需要先定义关键帧，第一种语法如下：

@keyframes keyframesName{
    from{
        /*property:value*/
    }
    to{
        /*property:value*/
    }
}

注意：keyframesName是自定义的名称，可以是任意合法的名字。

property:value是指元素的属性名和属性值。

第二种语法如下：

@keyframes keyframesName{
    0%{
        /*property:value*/
    }
    20%{
        /*property:value*/
    }
    60%{
        /*property:value*/
    }
    100%{
        /*property:value*/
    }
}

用百分比可以更精细得控制动画，注意第一种写法中也可以夹杂第二写法，如下：

@keyframes keyframesName{
    from{
        /*property:value*/
    }
    20%{
        /*property:value*/
    }
    60%{
        /*property:value*/
    }
    to{
        /*property:value*/
    }
}

3.2 给元素添加动画相关属性

定义关键帧之后，还需要给元素添加相关属性，才能有动画效果，常用属性有：

**animation-name：**给元素指定具体的动画（必要的属性，具体的关键帧，就是前面说的keyframesName）

**animation-duration：**设置动画所需时间，必要属性。

**animation-delay：**动画延迟时间，即元素从多长时间后开始产生动画效果。不是必要属性，默认立即开始。

如下代码示意一个盒子在容器盒子中从左边到右边：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画演示</title>
    <style>
        .outer{
            width: 600px;
            height: 100px;
            background-color: gray;
            overflow: hidden;
        }
        .inner{
            height: 50px;
            width: 50px;
            margin-top: 25px;
            background-color: red;
            /* 添加动画 */
            animation-name: move;
            /* 设定动画时长 */
            animation-duration: 5s;
        }
        /* 定义关键帧 */
        @keyframes move{
            from{
            }
            to{
                /* 设定位移 */
                transform: translateX(550px);
            }
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

运行效果如下：

以上便是一个最简单的动画了。

3.3 动画的其他属性

3.3.1 设置动画的类型

animation-timing-function属性可以设置动画的类型，常用值如下：

属性值	含义	效果示意图
ease	平滑动画 —— 默认值
linear	线性过渡
ease-in	慢 → 快
ease-out	快 → 慢
ease-in-out	慢 → 快 → 慢
step-start	等同于 steps(1, start)
step-end	steps(1, end)
steps( integer,?)	接受两个参数的步进函数。第一个参数必须为正整数，指定指定函数的步数。第二个参数取值可以是 start 或 end ，指定每一步的值发生变化的时间。	animation-timing-function: steps(10,start);
cubic-bezie ( number, number, number, number)	特定的贝塞尔曲线类型。一共四个参数，第一个和第三个必须为0-1之间的数。在线制作贝赛尔曲线：https://cubic-bezier.com	cubic-bezier(.5,2.29,.62,.4);

3.3.2 指定动画播放次数

animation-iteration-count属性指定动画的播放次数，常用值有两个：

**number ：**动画循环次数
infinite ： 无限循环

3.3.3 指定动画方向

animation-direction属性指定动画方向，常用值如下：
**normal ： **正常方向 (默认)
reverse ： 反方向运行
alternate ： 动画先正常运行再反方向运行，并持续交替运行
alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行

3.3.4 设置动画之外的状态

animation-fill-mode属性可以设置动画之外的状态，常用值如下：

**forwards ： **设置对象状态为动画结束时的状态
**backwards ： **设置对象状态为动画开始时的状态

3.3.5 设置动画的播放状态

animation-play-state属性可以设置动画的播放状态，常用值如下：

running ： 运动 (默认)
**paused ： **暂停

3.4 动画复合属性

**animation:**属性用来设置动画复合属性，只设置一个时间表示duration动画持续的时间，设置两个时间分别是duration动画持续时间和delay动画延时时间，其他的属性没有数量和前后顺序要求。

不过，animation-play-state 一般单独使用。

4.过渡

过渡可以在不使用 Flash 动画，不使用 JavaScript 的情况下，让元素从一种样式，平滑过渡为另一种样式。

常见的应用场景比如给某个元素设置了鼠标划过，会产生阴影，并同时放大。如果不设置过渡，会比较生硬，设置过渡，会比较柔和，效果好一些，如下：

没有设置过渡的效果

设置了过渡的效果

过渡相关的属性有以下几种：

4.1 transition-property

**作用：**定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。
常用值：
- **none ：**不过渡任何属性。
- **all ：**过渡所有能过渡的属性。
- 具体某个属性名，例如： width 、 transform ，若有多个以逗号分隔。
  
  **注意：**不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。
  
  常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属性、 3D 变换属性、阴影。

4.2 transition-duration

**作用：**设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。
常用值：
- **0 ：**没有任何过渡时间 —— 默认值。
- **s 或 ms ：**秒或毫秒。
- **列表：**如果想让所有属性都持续一个时间，那就写一个值。如果想让每个属性持续不同的时间那就写一个时间的列表。