前端HTML5和CSS3知识补充（2）

文章目录

2D转换
- 二维坐标系
- 移动：translate
- - 语法
- 旋转
- - 语法
  - 转换中心点
  - - 语法
- 缩放
- - 语法
- 2D转换综合写法
动画
- 动画的基本使用
- - 动画的定义
  - 用keyframes定义动画（类似定义选择器）
  - 动画的调用
- 动画常用属性
- 动画简写属性
- - 速度曲线
  - - steps的打字机效果
3D转换
- 三维坐标系
- 3D位移
- 透视

2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术

移动：translate

2D移动是2D转换里面的一种功能可以改变元素在页面中的位置，类似定位。

语法

transform:translate(x,y);
或分开写：
transform:translateX(n);
transform:translateY(n);

代码如下：

div{
    width:100px;
    height:100px;
    color:red;
    /*沿着x轴移动100px，沿着y轴移动200px*/
    transform:translate(100px,200px);
}

重点：

定义2D转换中的移动，沿着X和Y轴移动元素
translate最大的优点：不影响其他元素的位置
translate中的百分比单位是相对于自身元素（宽、高）的translate:(50%,50%);
对行内标签（行盒）没有效果

通过translate可以实现盒内盒子居中，代码如下：

        /* 实现盒内盒子居中 */
        div{
            width: 300px;
            height: 400px;
            background-color: blue;
            position: relative;
        }
        div div{
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            background-color: brown;
            transform: translate(-50%,-50%);
        }

旋转

2D旋转指的是让元素在2维平面内顺时针旋转或逆时针旋转。

语法

transform:rotate(度数)

重点：

rotate里面的度数，单位是deg，比如 rotate(45deg)
角度为正时，顺时针；角度为负时，逆时针
默认旋转的中心点是元素的中心点

转换中心点

我们可以通过transform-origin设置旋转中心点

语法

transform-origin: x y;

重点：

注意后面的参数x和y用空格隔开
x、y默认转换的中心点是元素的中心点（50% 50%）
还可以给x、y设置像素或者方位名称（top bottom left right center）

缩放

缩放，通过scale属性控制元素的放大或缩小

语法

transform:scale(x,y);

注意其中的x和y用逗号分隔
transform:scale(1,1); ：宽和高都放大一倍，相当于没有放大
transform:scale(2,2); ：宽和高都放大2倍
transform:scale(2); ：宽和高都放大2倍，相当于 transform:scale(2,2);
transform:scale(0.5,0.5); ：缩小
scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

2D转换综合写法

同时使用多个转换，其格式为：transform:translate() rotate() scale()···等
其顺序会影响转换效果。（先旋转会改变坐标轴方向）
当我们同时有位移和其他属性的时候，记得将位移放到最前面

动画

动画是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用

制作动画分为两步：

先定义动画
在使用（调用）动画

动画的定义

代码格式如下：

/* 定义一个名字为move的动画，让一个盒子从左向右移动900像素 */
    @keyframes move {
        0%{
            transform: translate(0);
        }
        100%{
            transform: translate(900px,0px);
        }
    }

用keyframes定义动画（类似定义选择器）

0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在@keyframes 中规定某项CSS样式，就能创建有当前样式逐渐改为新样式的动画效果。
动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式和任意多的次数。
用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。

动画的调用

代码格式如下：

    div{
        animation: move; /*调用名为move的动画*/
        animation-duration: 5s; /*动画持续时间为5s*/
    }

动画常用属性

@keyframes：规定动画。
animation：所有动画的简写属性，除了animation-play-state。
animation-name：规定@keyframes动画的名称。（必须）
animation-duration：规定动画完成一个周期花费的时间，单位是秒或毫秒，默认是0.（必须）
animation-timing-function：规定动画的速度曲线，默认是“ease”。
animation-delay：规定动画何时开始。
animation-iteration-count：规定动画被播放的次数，默认是1，还有infinite——无限循环。
animation-direction：规定动画是否在下一周期逆向播放，默认是“normal”，逆向播放是“alternate”。
animation-play-state：规定动画是否正在运行或暂停。默认是“running”，还有“pause”。
animation-fill-mode：规定动画结束后状态，保持——forwards、回到起始——backwards。

动画简写属性

animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或结束的状态;

animation: myfirst 5s linear 2s infinite alternate;

简写属性里面不包含animation-play-state
暂停动画：animation-play-state: pauased; 经常和鼠标经过等配合使用
想要动画走回来而不是直接跳回来：animatioon-direction: alternate;
盒子动画结束后，停在结束位置：animation-fill-mode: forwards;

速度曲线

animation-timing-function：规定动画的速度曲线，默认是“ease”

linear：动画从头到尾匀速。
ease：默认。动画以低速开头，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束，
steps()：指定了时间函数中的间隔数量（步长）

steps的打字机效果

代码如下：

<!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>
        /* 打字机效果 */
        @keyframes dazi{
            0%{
                width: 0;
            }
            100%{
                width: 100px;
            }
        }
        div{
            overflow: hidden;
            height: 25px;
            font-size: 20px;
            animation: dazi 5s steps(5) forwards;
        }
    </style>
</head>
<body>
    <div>一二三四五</div>
</body>
</html>

3D转换

我们生活的环境是3D的，照片是3D物体在2D平面呈现的例子。

特点：

近大远小
物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

主要知识点：

3D位移：translate3d(x,y,z)
3D旋转：rotate3d(x,y,z)
透视：perspective
3D呈现：transform-style

三维坐标系

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

x轴：水平向右注意：x右边是正值，左边是负值
y轴：垂直向下注意：y下面是正值，上面是负值
z轴：垂直屏幕注意：往外面是正值，往里面是负值

坐标轴

3D位移

transform: translateX(100px) ：仅在x轴上移动
transform: translateY(100px) ：仅在y轴上移动
transform: translateZ(100px) ：仅在z轴上移动（注意：translateZ一般用px单位）
transform: translate3d(x,y,z) ：其中x、y、z分别指要移动的轴的方向的距离

透视

在2D平面产生近大远小视觉立体，但是只是效果二维的。

如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）。
模拟人类的视觉位置，可认为安排一只眼睛去看。
透视也称为视距 —— 就是人眼睛到屏幕的距离。
距离视觉点越近的在电脑平面成像越大，越远成像越小。
透视的单位是像素。

透视原理

透视写在被观察元素的父盒子上面
d：就是视距，视距就是人眼睛到屏幕的距离。
z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。