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动画延时时间,其他的属性没有数量和前后顺序要求。

相关推荐
我要洋人死5 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人17 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人17 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR23 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香24 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969327 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai33 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_91541 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#