7.2 CSS 2D,3D转换与动画

野性酷女 2023-01-22 06:55 12阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*   *  1. CSS 2D转换
     *   *  1.1 2D转换之 - 移动translate
         *  1.2 2D转换之 - 旋转rotate
         *  1.3 2D转换之- 缩放scale
         *  1.4 2D转换综合写法以及顺序问题
     *  2. CSS3 动画
     *   *  2.1 动画的基本使用
         *  2.2 动画序列
         *  2.3 动画属性
         *  2.3 动画简写属性
         *  2.5 速度曲线细节
     *  3. CSS 3D转换
     *   *  3.1 三维坐标系
         *  3.2 3D移动 translate3d
         *  3.3 透视perspective
         *  3.4 3D旋转 rotate3d
         *  3.5 3D呈现 transform-style
     *  4. 浏览器私有前缀

--------------------

## 1. CSS 2D转换 ##

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。2D转换是改变标签在二维平面上的位置和形状的一种技术

转换可以简单理解为变形：

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

### 1.1 2D转换之 - 移动translate ###

**1. 二维坐标系**：  
![2021051817181518.png][]  
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

**2. 语法**：

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

**3. 重点**：

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

**4. 让一个盒子水平居中**

div {
        
        position: relative;
        width: 500px;
        height: 500px;
        background-color: orange;
    }
    
    p {
        
        position: absolute;
        top: 50%;
        left: 50%;/*先采用定位使盒子移动父盒子的一半宽度和高度*/
        transform: translate(-50%, -50%); /*再采用移动，向上，向左移动盒子自身的50%*/
        background-color: tomato;
        width: 200px;
        height: 200px;
    }
       
    <div>
    	<p></p>
    </div>

### 1.2 2D转换之 - 旋转rotate ###

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

**1. 语法**：

transform: rotate(度数)

**2. 重点**：

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

**3. 设置转换中心点 transform-origin**

transform-origin: x y;

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

### 1.3 2D转换之- 缩放scale ###

缩放，顾名思义可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小

**1. 语法**：

transform: scale(x, y);

**2. 注意**：

*  注意其中的x和y用逗号分隔
 *  transform: scale(2, 2): 宽和高都放大2倍；等价于transform: scale(2): 只写一个参数，第二个参数和第一个参数一样，即等比例缩放
 *  transform: scale(0.5, 0.5): 缩小
 *  scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他的盒子

### 1.4 2D转换综合写法以及顺序问题 ###

**注意**：

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

## 2. CSS3 动画 ##

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

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

### 2.1 动画的基本使用 ###

制作动画分为两步：

1.  先定义动画
2.  再使用（调用）动画

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

@keyframes 动画名称 {
        
        0% {
        
            width：100px;
        }
        100% {
        
            width:200px;
        }
    }

**2. 元素使用动画**

div {
        
    	/*调用动画*/
    	animation-name：动画名称；
    	/*持续时间*/
    	animation-duration：持续时间；
    }

### 2.2 动画序列 ###

**动画序列**：

*  0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
 *  在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐转为新样式的动画效果
 *  动画是一个元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的次数
 *  请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%
 *  可以做多个状态的变化，keyframes代表关键帧，里面的百分比要是整数，他们是我们的总的时间的划分（例如总时间是10s，则25%表示2.5s时刻则转化到该关键帧）

### 2.3 动画属性 ###

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

### 2.3 动画简写属性 ###

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

animation: name duration timing-function delay iteration-count direction fill-mode;

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

### 2.5 速度曲线细节 ###

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

<table> 
 <thead> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>linear</td> 
   <td>动画从头到尾的速度是相同的，匀速</td> 
  </tr> 
  <tr> 
   <td>ease</td> 
   <td>默认。动画从低速开始，然后加速，在结束前变慢</td> 
  </tr> 
  <tr> 
   <td>ease-in</td> 
   <td>动画从低速开始</td> 
  </tr> 
  <tr> 
   <td>ease-out</td> 
   <td>动画以低速结束</td> 
  </tr> 
  <tr> 
   <td>ease-in-out</td> 
   <td>动画以低速开始和结束</td> 
  </tr> 
  <tr> 
   <td>steps()</td> 
   <td>指定了时间函数中的间隔数量（步长）</td> 
  </tr> 
 </tbody> 
</table>

**重点**：steps就是分几步来完成我们的动画，有了steps就不要再写ease或者linear了

我们元素也可以添加多个动画、用逗号分隔

animation: name1 duration1 .... , name2 duration2 ....;

## 3. CSS 3D转换 ##

### 3.1 三维坐标系 ###

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

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

### 3.2 3D移动 translate3d ###

3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向

transform: translateX(100px);
    transform: translateY(100px);
    /* 1. translateZ 后面的单位我们一般跟px */
    transform: translateZ(100px);
    /* 2. 3D移动有简写的方法 */
    transform: translate3d(x,y,z); 
     /* 3. xyz是不能省略的，如果没有就写0 */
    transform: translate3d(400px, 100px, 100px);

### 3.3 透视perspective ###

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

*  如果想要在网页产生3D效果必须加透视（理解成3D物体投影在2D平面内），有了透视，我们就能看到translateZ引起的变化了
 *  透视我们称为**视距**， 透视的单位是像素
 *  距离视距点越近的在电脑平面成像就越大，越远成像就越小  
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VyLOinab-1621329435745)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210518102232728.png)\]][img-VyLOinab-1621329435745_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210518102232728.png]

**透视写在被观察元素的父盒子上面，translateZ写在做改动的元素上面**

d：就是视距，视距就是人的眼睛到屏幕的距离，**透视（视距）越小，我们看到的物体越大**

z：就是z轴，物体距离屏幕的距离，**z轴越大（正值），我们看到的物体就越大**

### 3.4 3D旋转 rotate3d ###

3D旋转可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

transform: rotateX(45deg); 沿着x轴正方向旋转45度
    transform: rotateY(45deg); 沿着y轴正方向旋转45度
    transform: rotateZ(45deg); 沿着z轴正方向旋转45deg
    transform: rotate3d(x,y,z,deg);  沿着自定义轴旋转deg角度（了解即可）
    transform: rotate3d(1, 1, 0, 45deg);

对于**元素旋转方向**的判断，我们需要学习一个左手准则

*  左手的大拇指指向x轴的正方向，其余手指的弯曲方向就是该元素沿着x轴旋转的方向
 *  左手的大拇指指向y轴的正方向，其余手指的弯曲方向就是该元素沿着y轴旋转的方向
 *  对于z轴，顺时针旋转为正方向，逆时针旋转为反方向

### 3.5 3D呈现 transform-style ###

*  控制子元素是否开启三维立体环境
 *  默认transform-style: flat 子元素不开启3d立体空间 （如左图） **transform-style: preserve-3d 子元素开启立体空间**（如右图）
 *  代码需要写给父级，但影响的是子盒子（重要！！！）  
    ![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0LyvIRNz-1621329435748)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210518113000548.png)\]][img-0LyvIRNz-1621329435748_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210518113000548.png]

## 4. 浏览器私有前缀 ##

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加

**4.1 私有前缀**

*  \-moz-：代表firefox浏览器私有属性
 *  \-ms-：代表ie浏览器私有属性
 *  \-webkit-：代表safari、chrome私有属性
 *  \-o-：代表Opera私有属性

**4.2 提倡的写法**

-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[2021051817181518.png]: /images/20221020/4d2bd40c2ceb4db485ffb8432f624117.png
[20210518171905583.png]: /images/20221020/4559464863a040bd88a9235d3a102e39.png
[img-VyLOinab-1621329435745_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210518102232728.png]: /images/20221020/bd023dba24fa442caa08cfe39644820e.png
[img-0LyvIRNz-1621329435748_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210518113000548.png]: /images/20221020/27f82b994b77480e902c1eda33b9f7ba.png