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
-
位移配合相对定位,可实现元素水平垂直居中。如下代码:
cssposition: 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动画延时时间,其他的属性没有数量和前后顺序要求。