CSS3动画（过渡、2D变形、3D变形）

梦里梦外; 2022-02-05 05:07 365阅读 0赞

### 1.过渡transition ###

#### 1)说明： ####

作用在进行变化的元素上，有四个属性值：property(目标属性),duration(过渡时长), curve(运动曲线),delay(开始时间)

创建一个空div，为它设置样式：

div{ 
    			width:100px;
    			height:100px;
    			background-color:lightblue;
    			margin:200px auto;
               	/*transition: width 1s, height 1s linear;*/
    			transition:all 1s linear;
    		}
    		div:hover{ 
                width:300px;
    			height:300px;
    		}

![在这里插入图片描述][20190504234542936.gif]

### 2.2D变形 ###

#### (1)常用属性： ####

##### a)移动 #####

translate(x,y) ,translateX(x),translateY(y)，需要注意,translateX(x)和translateY(y)不能同时设置，要想同时设置水平和垂直方向移动的值则使用translate(x,y)

##### b)缩放 #####

scale(倍数) | scaleX(倍数) | scaleY(倍数)

##### c)旋转 #####

rotate(deg) 正值为顺时针旋转，负值为逆时针旋转

##### d)调整原点 #####

transform-origin:x,y 默认是以自身左上角为原点进行变换的，通过这个属性可以改变原点位置

##### e)倾斜 #####

skew(deg,deg) 设置两个方向的倾斜角度

创建一个空div，为其设置样式：

div{ 
    			width:100px;
    			height:100px;
    			background-color:lightblue;
    			margin:200px auto;
    			/*过渡*/
    			transition:all 3s linear;
    			/*调整原点*/
    			transform-origin:200px 200px;
    		}
    		div:hover{ 
    			/*移动，缩放，旋转，倾斜*/
    			transform:translate(200px,200px) scale(2) rotate(30deg) skew(20deg,20deg);
    		}

在浏览器的显示效果为：

![在这里插入图片描述][20190504234557440.gif]

#### (2)总结 ####

通常过渡(translate)与变形(transform)一同搭配:hover等伪元素进行呢使用的，过渡主要用于控制变形需要的时长，变形用于设定变化的效果，伪元素用于触发。

### 3.3D变形(transform) ###

#### 1)CSS3D坐标系 ####

![在这里插入图片描述][20190504234648341.png]

![在这里插入图片描述][20190504234700685.png]

#### 2)透视(Perspective) ####

![在这里插入图片描述][20190504234711626.png]

##### a)透视的作用： #####

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

##### b)透视原理 #####

近大远小的视觉感知。

##### c)使用 #####

perspective的值即为视距，表示的是视点距离屏幕的距离。一般将此属性设置给父元素，作用于所有进行3D转换的子元素，使变形具有立体感。

#### 3)属性 ####

与2D相似，相比增加了Z轴

<table> 
 <thead> 
 <tr> 
 <th>ranslate(x,y)</th> 
 <th>定义 2D 转换。</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>translate3d(x,y,z)</td> 
 <td>定义 3D 转换。</td> 
 </tr> 
 <tr> 
 <td>translateX(x)</td> 
 <td>定义转换，只是用 X 轴的值。</td> 
 </tr> 
 <tr> 
 <td>translateY(y)</td> 
 <td>定义转换，只是用 Y 轴的值。</td> 
 </tr> 
 <tr> 
 <td>translateZ(z)</td> 
 <td>定义 3D 转换，只是用 Z 轴的值。</td> 
 </tr> 
 <tr> 
 <td>scale(x,y)</td> 
 <td>定义 2D 缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scale3d(x,y,z)</td> 
 <td>定义 3D 缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scaleX(x)</td> 
 <td>通过设置 X 轴的值来定义缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scaleY(y)</td> 
 <td>通过设置 Y 轴的值来定义缩放转换。</td> 
 </tr> 
 <tr> 
 <td>scaleZ(z)</td> 
 <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td> 
 </tr> 
 <tr> 
 <td>rotate(angle)</td> 
 <td>定义 2D 旋转，在参数中规定角度。</td> 
 </tr> 
 <tr> 
 <td>rotate3d(x,y,z,angle)</td> 
 <td>定义 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>rotateX(angle)</td> 
 <td>定义沿着 X 轴的 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>rotateY(angle)</td> 
 <td>定义沿着 Y 轴的 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>rotateZ(angle)</td> 
 <td>定义沿着 Z 轴的 3D 旋转。</td> 
 </tr> 
 <tr> 
 <td>skew(x-angle,y-angle)</td> 
 <td>定义沿着 X 和 Y 轴的 2D 倾斜转换。</td> 
 </tr> 
 <tr> 
 <td>skewX(angle)</td> 
 <td>定义沿着 X 轴的 2D 倾斜转换。</td> 
 </tr> 
 <tr> 
 <td>skewY(angle)</td> 
 <td>定义沿着 Y 轴的 2D 倾斜转换。</td> 
 </tr> 
 <tr> 
 <td>perspective(n)</td> 
 <td>为 3D 转换元素定义透视视图。</td> 
 </tr> 
 </tbody> 
</table>

#### 4)其他属性 ####

##### a) 3D呈现 transform-style：3d #####

给父盒子添加，让子盒子存在真3d效果

指定子元素定位在3d空间中

flat：默认值，扁平化

##### b) backface-visibility：hidden；设置元素背面是否可见 #####

#### 5)综合3D变形属性实现图标翻转 ####

html<div>
 		<img src="rhino.jpg" alt="">
 		<img src="ninja.jpg" alt="">
 		
 	</div>

设置3D样式：

body{ 
                /*设置透视*/
                perspective: 500px;
            }
    		
    		div{ 
    			width:300px;
    			height:300px;
    			position:relative;
    			margin: 100px auto;
    			background-color: #ccc;
    		}
    		div img{ 
    			width:100%;
    			height:300px;
    			position:absolute;
    			left:0px;
    			top:0px;
                /*设置过渡*/
     			transition: all 5s;
    		}
    		div img:first-child{ 
    			z-index:1;
                /*设置背向屏幕是否可见*/
    			backface-visibility: hidden;
    		}
    		div:hover img{ 
                /*设置翻转*/
    			 transform: rotateY(180deg);
    		}

在浏览器中显示的效果为：

![在这里插入图片描述][20190504234728776.gif]

### 4.动画animation ###

#### 1)用法： ####

配合translate(移动)和transform(变形)通过设置多个节点位置，来进行移动路线的控制。

#### 2)使用： ####

自定义动画@keyframes name\{设置多个节点\}

animation:name(自定义的动画名) time(动画时长) curve(运动曲线) start(开始时间) frequency(运动次数，可设置为infinite) alternative(完成一次运动后是否反方向运动)

创建两个空div,为其加入CSS样式：

div{ 
    			width:100px;
    			height:100px;
    			background-color: lightblue;
    			border-radius:50%;
    
    			animation:walk 5s infinite alternate;
    		}
    		@keyframes walk{ 
    			0% { transform: translate3d(0,0,0);}
    			25%{ transform: translate3d(400px,0,0);}
    			50%{ transform: translate3d(400px,200px,0);}
    			75%{ transform: translate3d(0,200px,0);}
    			100%{ transform: translate3d(0,0,0);}
    		}

在浏览器中的显示效果为：

![在这里插入图片描述][20190504234744253.gif]

小球按照设置的路线进行运动，并且在完整的运动一次以后反方向进行运动，无限次的反复循环。

[20190504234542936.gif]: /images/20220205/24db519945f74033b60d82622a46dfbb.png
[20190504234557440.gif]: /images/20220205/bf1863908beb40c9a6e45b78f5b596f6.png
[20190504234648341.png]: /images/20220205/e53fd775521c400db3b9b2139d354e10.png
[20190504234700685.png]: /images/20220205/8b682308cc494960b6c392e5b7eee6f9.png
[20190504234711626.png]: /images/20220205/b8af04be959e47f9bfd81ee6161dea35.png
[20190504234728776.gif]: /images/20220205/b227056b1ba54e9e8b6de9853c24fc82.png
[20190504234744253.gif]: /images/20220205/fe27d39beda5448c9190c906b032d415.png