CSS知识复习4

文章目录

• 2D变换
• • 2D缩放
  • 2D旋转
  • 多重变换
  • 变换原点
• 3D变换
• • 开启3D空间
  • 设置景深
  • 透视点位置
  • 3D位移
  • 3D旋转
  • 3D缩放
  • 多重变换
  • 背部可见性
• 过渡
• 动画
• • 动画基本使用
  • 动画其他属性
  • 动画复合属性
• 多列布局

2D变换

编写 transform 的具体值，相关可选值如下：

注意点：

位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。

与相对定位的区别：相对定位的百分比值，参考的是其父元素；定位的百分比值，参考的是其自身。

浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。

transform 可以链式编写，例如：

位移对行内元素无效。

位移配合定位，可实现元素水平垂直居中

.box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

2D缩放

编写 transform 的具体值，相关可选值如下

借助缩放，可实现小于 12px 的文字。

2D旋转

让元素在二维平面内，顺时针旋转或逆时针旋转

编写 transform 的具体值，相关可选值如下：

注意： rotateZ(20deg) 相当于 rotate(20deg) ，当然到了 3D 变换的时候，还能写：rotate(x,x,x)

多重变换

多个变换，可以同时使用一个 transform 来编写。

transform: translate(-50%, -50%) rotate(45deg);

变换原点

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

修改变换原点对位移没有影响， 对旋转和缩放会产生影响。

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

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

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

transform-origin: left top ，变换原点在元素的左上角 。

transform-origin: 50px 50px ， 变换原点距离元素左上角 50px 50px 的位置。

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

3D变换

开启3D空间

重要原则：元素进行 3D 变换的首要操作：父元素 必须开启 3D 空间！

使用 transform-style 开启 3D 空间，可选值如下：

flat ： 让子元素位于此元素的二维平面内（ 2D 空间）------ 默认值

preserve-3d ： 让子元素位于此元素的三维空间内（ 3D 空间）

设置景深

何为景深？------ 指定观察者与 z=0 平面的距离，能让发生 3D 变换的元素，产生透视效果，看来更加立使用 perspective 设置景深，可选值如下：

none ： 不指定透视 ------（默认值）

长度值 ： 指定观察者距离 z=0 平面的距离，不允许负值。

注意： perspective 设置给发生 3D 变换元素的父元素！

透视点位置

所谓透视点位置，就是观察者位置；默认的透视点在元素的中心。

使用 perspective-origin 设置观察者位置（透视点的位置），例如：

/* 相对坐标轴往右偏移400px， 往下偏移300px（相当于人蹲下300像素，然后向右移动400像素看元素）
*/
perspective-origin: 400px 300px;

注意：通常情况下，我们不需要调整透视点位置。

3D位移

3D 位移是在 2D 位移的基础上，可以让元素沿 z 轴位移，具体使用方式如下：

先给元素添加 转换属性 transform

编写 transform 的具体值， 3D 相关可选值如下：

3D旋转

3D 旋转是在 2D 旋转的基础上，可以让元素沿 x 轴和 y 轴旋转，具体使用方式如下：

编写 transform 的具体值， 3D 相关可选值如下：

3D缩放

3D 缩放是在 2D 缩放的基础上，可以让元素沿 z 轴缩放，具体使用方式如下：

编写 transform 的具体值， 3D 相关可选值如下：

多重变换

多个变换，可以同时使用一个 transform 来编写。

transform: translateZ(100px) scaleZ(3) rotateY(40deg);

注意点：多重变换时，建议最后旋转。

背部可见性

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

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

hidden ： 指定元素背面不可见

注意： backface-visibility 需要加在发生 3D 变换元素的自身上。

过渡

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

作用：定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。

常用值：

none ：不过渡任何属性。

all ：过渡所有能过渡的属性。

具体某个属性名 ，例如： width 、 heigth ，若有多个以逗号分隔。

不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持

过渡。

常见的支持过渡的属性有：颜色、长度值、百分比、 z-index 、 opacity 、 2D 变换属

性、 3D 变换属性、阴影。
transition-duration

设置过渡的持续时间，即：一个状态过渡到另外一个状态耗时多久。

常用值：

0 ：没有任何过渡时间 ------ 默认值。

s 或 ms ：秒或毫秒。

列表 ：

如果想让所有属性都持续一个时间，那就写一个值。

如果想让每个属性持续不同的时间那就写一个时间的列表。
transition-delay

作用：指定开始过渡的延迟时间，单位： s 或 ms
transition-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 ，指定每一步的值发生变化的时间点。第二个参数默认值为 end 。

cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。
transition 复合属性

如果设置了一个时间，表示 duration ；如果设置了两个时间，第一是 duration ，第二个是delay ；其他值没有顺序要求。

transition:1s 1s linear all;

动画

动画基本使用

第一步：定义关键帧（定义动画）

• 简单方式定义

/*写法一*/
@keyframes 动画名 {
from {
/*property1:value1*/
/*property2:value2*/
}
to {
/*property1:value1*/
}
}

• 完整方式定义

@keyframes 动画名 {
0% {
/*property1:value1*/
}
20% {
/*property1:value1*/
}
40% {
/*property1:value1*/
}
60% {
/*property1:value1*/
}
80% {
/*property1:value1*/
}
100% {
/*property1:value1*/
}
}

第二步：给元素应用动画，用到的属性如下：

animation-name ：给元素指定具体的动画（具体的关键帧）

animation-duration ：设置动画所需时间

animation-delay ：设置动画延迟

.box {
/* 指定动画 */
animation-name: testKey;
/* 设置动画所需时间 */
animation-duration: 5s;
/* 设置动画延迟 */
animation-delay: 0.5s;
}

动画其他属性

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 ，指定每一步的值发生变化的时间

点。第二个参数默认值为 end 。

cubic-bezie ( number, number, number, number)： 特定的贝塞尔曲线类型。
animation-iteration-count ，指定动画的播放次数，常用值如下：

number ：动画循环次数

infinite ： 无限循环
animation-direction ，指定动画方向，常用值如下：

normal ： 正常方向 (默认)

reverse ： 反方向运行

alternate ： 动画先正常运行再反方向运行，并持续交替运行

alternate-reverse ： 动画先反运行再正方向运行，并持续交替运行

animation-fill-mode ，设置动画之外的状态

forwards ： 设置对象状态为动画结束时的状态

backwards ： 设置对象状态为动画开始时的状态
animation-play-state ，设置动画的播放状态，常用值如下：

running ： 运动 (默认)

paused ： 暂停

动画复合属性

只设置一个时间表示 duration ，设置两个时间分别是： duration 和 delay ，其他属性没有数量和顺序要求。

.inner {
animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards;
}

多列布局

作用：专门用于实现类似于报纸的布局。

常用属性如下：

column-count ：指定列数，值是数字。

column-width ：指定列宽，值是长度。

columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。

column-gap ：设置列边距，值是长度。

column-rule-style ：设置列与列之间边框的风格，值与 border-style 一致。

column-rule-width ：设置列与列之间边框的宽度，值是长度。

column-rule-color ：设置列与列之间边框的颜色。

coumn-rule ：设置列边框，复合属性。

column-span 指定是否跨列；值: none 、 all 。