CSS变换

1. 2D变换

1.1 2D位移

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

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

如下代码示例:

html 复制代码
<!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

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

    css 复制代码
    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缩放,就产生如下效果:

html 复制代码
<!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里,如下所示:

css 复制代码
transform: translate(50%,100%) scale(1.1) rotate(45deg)

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

1.5 变化原点

  • 元素变换时,默认的原点是元素的中心,使用 transform-origin 可以设置变换的原点。
css 复制代码
transform-origin: 50% 50% /*变换原点在元素的中心位置,百分比是相对于自身。------ 默认值*/
  • 修改变换原点对位移没有影响, 对旋转和缩放会产生影响。

  • 如果提供两个值,第一个用于横坐标,第二个用于纵坐标。

css 复制代码
transform-origin: left top /*变换原点在元素的左上角 。*/
transform-origin: 50px 50px /* 变换原点距离元素左上角 50px 50px 的位置。*/
  • 如果只提供一个,若是像素值,表示横坐标,纵坐标取 50% ;若是关键词,则另一个坐标取 50%。
css 复制代码
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里,如下所示:

css 复制代码
transform: translateZ(50px) scaleZ(2) rotateY(30deg);

2.8 背部可见性

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

**visible :**指定元素背面可见,允许显示正面的镜像。------ 默认值

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

2.9 3D变换综合练习案例

如下代码:

html 复制代码
<!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使用动画,需要先定义关键帧,第一种语法如下:

css 复制代码
@keyframes keyframesName{
    from{
        /*property:value*/
    }
    to{
        /*property:value*/
    }
}

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

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

第二种语法如下:

css 复制代码
@keyframes keyframesName{
    0%{
        /*property:value*/
    }
    20%{
        /*property:value*/
    }
    60%{
        /*property:value*/
    }
    100%{
        /*property:value*/
    }
}

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

css 复制代码
@keyframes keyframesName{
    from{
        /*property:value*/
    }
    20%{
        /*property:value*/
    }
    60%{
        /*property:value*/
    }
    to{
        /*property:value*/
    }
}

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

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

**animation-name:**给元素指定具体的动画(必要的属性,具体的关键帧,就是前面说的keyframesName)

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

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

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

html 复制代码
<!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 :**秒或毫秒。

    • **列表 :**如果想让所有属性都持续一个时间,那就写一个值。如果想让每个属性持续不同的时间那就写一个时间的列表。

4.3 transition-delay

作用:指定开始过渡的延迟时间,单位: s 或 ms

4.4transition-timing-function

作用:设置过渡的类型。常用值与动画中的animation-timing-function完全一致

4.5 transition 复合属性

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

相关推荐
学不会•2 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
活宝小娜4 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点4 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow4 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o4 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic5 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā5 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder6 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727577 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架