CSS知识复习4

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 。