CSS动画，2D和3D模块

显示全部楼层 · 2019-10-12 10:23:41

CSS3提供了丰富的动画类属性，使我们可以不通过flash甚至JavaScript，就能实现很多动态的效果。它们重要分为三大类：transform（变换），transition（过渡），animation（动画）。此中transform又分为2D变换和3D变换，它赋予了我们不通过专业筹划软件制作平面大概立体图形的本领。

一　　过渡

　　通过给元素设置transition属性设置它的过渡效果。过渡实际定义的是元素从一种状态变成另一种状态的过程，比如宽度从100px变成300px，配景颜色从red变成orange等等。

1 div{
2 width:200px;
3 height:200px;
4 background-color:red;
5 transition-property:width,background-color;
6 /*该属性指定需要变换的元素属性，不同属性用逗号隔开*/
7 transition-duration:1s;
8 /*该属性指定整个过程花费的时间，如需单独为每个变化的属性设置时间，请利用逗号隔开*/
9 transition-timing-function:ease;
10 /*该属性设置变化的速率曲线，默认值即是ease，表示慢-快-慢，另有几个其他的取值：linear，匀速；ease-in，慢-快，ease-out，快-慢，ease-in-out，慢-快-慢，肉眼效果和ease相似*/
11 transition-delay:1s;
12 /*延长时间*/
13 }

复制代码

　　元素的属性设置好以后，需要某些利用触发了指定属性的变化才气看到效果，必如：hover，大概JS事故。

　　另外，transition实际是一个复合属性，多个属性过渡可以简写：

1 div{
2 width:200px;
3 height:200px;
4 transition:width 2s 1s,background-color 2s;
5 /*transition-property和transition-duration是必须的，另外两个是可选的*/
6 }
7 div:hover{
8 width:400px
9 }

复制代码

　　当有多个属性需要设置过渡，并且持续事故，速率曲线，延长时间均雷同时，你可以如下简写：

1 div{
2 /*some code*/
3 transform:all 2s;
4 /*全部发生变化的属性都设置过渡效果*/
5 }

复制代码

二　　动画

　　动画实在和过渡一样，都是用来给元素设置动态效果的，不同的是，过渡需要人为的触发才气被实验，而这里将要讲授的动画不需要人为触发。

　　在给元素设置动画之前，我们起首应该创建一个动画效果，即开始是什么状态，竣事是什么样的状态。

1 @keyframes sport{/*sport是动画的名称，可以自定义*/
2 from{
3 width:200px;
4 }
5 to{
6 width:400px;
7 }
8 /*除了利用from...to的方式，你还可以利用百分比创建更加丰富的动画过程，0%表示开始时，100%表示竣事时*/
9 }

复制代码

　　创建好动画之后，你就可以为元素设置诸如动画持续时长，速率曲线，重复次数等属性了。

1 div{
2 animation-name:sport;
3 /*规定元素需要实验的动画名称，即利用@keyframs创建的谁人*/
4 animation-duration:5s;
5 /*规定动画完成一个周期所花费的秒或毫秒*/
6 animation-timing-function:ease;
7 /*规定动画的速率曲线,可选值同过渡*/
8 animation-delay:3s;
9 /*规定动画延长时间*/
10 animation-iteration-count:5;
11 /*规定动画被播放的次数，infinite表示不停循环播放*/
12 animation-direction:alternate;
13 /*规定动画是否在下一周期逆向地播放，normal是默认取值，表示不逆向播放，逆向播放一次也会在animation-iteration-count属性值中减1*/
14 animation-play-state:paused;
15 /*规定动画是否正在运行或暂停，默认值是running，表示正在运行*/
16 animation-fill-mode:forwards;
17 /*规定动画竣事后元素的状态，forwards，保持动画停止时的状态，backwards，回到开始时的状态，none，保持默认。一样平常没有指定该属性时，动画竣事后会回到开始时的状态。不同欣赏器大概有不同体现*/
18 }

复制代码

三　　2D变换

　　通过给元素设置transform属性，可以对元素举行2D变换。很多地方把transform翻译成转换，该单词在英语中的寄义是使改变，使变形。我更倾向于把它翻译成变换，通过CSS变换，我们可以对元素举行移动、缩放、转动、拉伸等利用。

　　1，translate(x，y)　

1 div{
2 transform:translate(50px,100px);
3 }
4 /*div在程度方向移动50px，垂直方向移动100px*/

复制代码

　　translate方法吸收两个参数，分别表示在程度和垂直正方向上的偏移量，可以吸收负值，表示向反方向偏移。

　　2，rotate(deg)

1 div{
2 transform:rotate(30deg);
3 }
4 /*顺时针方向旋转元素30度*/

复制代码

　　rotate方法吸收一个参数，表示元素旋转的角度，可以吸收负值，表示逆时针方向旋转。rotate方法实际是通过修改元素的坐标系来达到旋转元素的目的，比如：

1 div{
2 transform:rotate(45deg) translate(50px,0);
3 /*多属性复合情势写法*/
4 }
5 /*元素先旋转45度，然后向欣赏器x轴正方向偏下45度的方向移动50px*/

复制代码

　　默认环境下，元素都是以本身的中心点为圆心旋转，我们可以通过transform-origin属性修改该参考点。

1 div{
2 width:200px;
3 height:200px;
4 transform:rotate(30deg);
5 transform-origin:0px 0px;/*以左上角为圆点旋转*/
6 /*取值200px 0px即以右上角为圆点旋转。改属性取值也可以是百分比或关键字。top，botton，left，right，center*/
7 }

复制代码

　　3，scale(x，y)

1 div{
2 transform:scale(2,3);
3 }
4 /*元素宽度放大2倍，高度放大3倍*/

复制代码

　　scale方法吸收两个参数，分别表示元素宽高需要缩放的比例，如果参数介于0到1之间则表示缩小，如果小于0，实际效果相当于翻转元素，感爱好的朋友可以自行测试，观察效果。

　　4，skew(x，y)

1 div{
2 transform:skew(30deg,30deg);
3 }
4 /*元素在程度和垂直方向均倾斜30度*/

复制代码

　　skew方法吸收两个参数，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

四　　3D变换

　　要想使元素以3D效果呈现，你可以给元素的父元素添加transform-style属性。

1 .father{
2 transform-style:preserve-3d;
3 }
4 .son{
5 /*some code*/
6 }

复制代码

　　transform-style属性的默认值是flat，即平面的意思。通过设置其值为preserve-3d即可让子元素以3D模式呈现。

　　事实上，我们是通过共同利用rotate方法，终极实现3D立体效果的。

　　我们知道，在2D空间，坐标轴只有x和y两根轴，而在3D空间，一共有x，y，z三根轴。我们上面讲授的rotate方法实际上都是围绕z轴在旋转，这也是该方法的默认方式。另外，实在我们还可以通过rotateX()，rotateY()，改变元素默认的旋转轴向。改变旋转轴向共同perspective属性利用效果更佳。

1 .father{
2 perspective:500px;
3 /*perspective属性取值是一样平常是一个像素值，设置后可以实现旋转后元素近大远小的效果*/
4 }
5 .son{
6 width:200px;
7 height:200px;
8 transform:rotateX(45deg);
9 }<br />10 /*留意，perspective属性需要设置在旋转元素的祖先元素上，通常我们把它设置在其父元素上。*/

复制代码

　　下面是两个3D立方体的示例代码：

　　HTML部分：

1 <div class="D3">
2 <ul>
3 <li>1</li>
4 <li>2</li>
5 <li>3</li>
6 <li>4</li>
7 <li>5</li>
8 <li>6</li>
9 </ul>
10 <ul>
11 <li>1</li>
12 <li>2</li>
13 <li>3</li>
14 <li>4</li>
15 <li>5</li>
16 <li>6</li>
17 </ul>
18 </div>

复制代码

　　CSS部分：

1 body{
2 background-color: #ccc;
3 perspective: 800px;
4 }
5 .D3{
6 width:550px;
7 height: 200px;
8 margin:100px auto;
9 }
10 @keyframes sport{
11 from{
12 transform: rotateX(0deg) rotateY(0deg);
13 }
14 to{
15 transform: rotateX(360deg) rotateY(360deg);
16 }
17 }
18 .D3 ul{
19 width: 200px;
20 height: 200px;
21 position: relative;
22 transform-style: preserve-3d;
23 transform: rotateX(0deg) rotateY(0deg);
24 animation: sport 10s linear infinite alternate;
25 display: inline-block;
26 margin-left:50px;
27 }
28 .D3 ul li{
29 list-style: none;
30 width:200px;
31 height: 200px;
32 position: absolute;
33 opacity: 0.3;
34 font-size: 100px;
35 line-height: 200px;
36 text-align: center;
37 }
38 .D3 ul li:nth-child(1){
39 background-color: red;
40 transform:translateZ(100px);
41 }
42 .D3 ul li:nth-child(2){
43 background-color: blue;
44 transform: rotateX(90deg) translateZ(100px);
45 }
46 .D3 ul li:nth-child(3){
47 background-color: yellow;
48 transform: rotateX(180deg) translateZ(100px);
49 }
50 .D3 ul li:nth-child(4){
51 background-color: pink;
52 transform: rotateX(270deg) translateZ(100px);
53 }
54 .D3 ul li:nth-child(5){
55 background-color: purple;
56 transform: rotateY(90deg) translateZ(-100px);
57 }
58 .D3 ul li:nth-child(6){
59 background-color: green;
60 transform: rotateY(90deg) translateZ(100px);
61 }
62 /*还记得吗？rotate方法是通过改变坐标系来达到旋转的目的哦！*/

复制代码

五　　transform对其他元素的影响

　　1，提高表现优先级

　　我们知道，在标准文档流中，如果利用负的margin值可以使一个元素覆盖在另一个元素上，正常环境下是写在后面的元素覆盖前面的。但是设置了transform属性的元素会覆盖其他元素。

1 .top{
2 width: 100px;
3 height: 100px;
4 background-color: red;
5 transform: rotate(0deg);
6 }
7 .bottom{
8 width: 100px;
9 height: 100px;
10 background-color: blue;
11 margin-top:-50px;
12 }
13 /*红色的会覆盖蓝色的div 50px*/

复制代码

　　2，改变fixed定位的相对对象

　　通常环境下，利用了position:fixed;属性的元素都会相对欣赏器窗口定位，不受滚动条的影响。但是当我们给其父元素设置了transform属性后，这一状况被改变了。

1 .father{
2 width: 500px;
3 height: 500px;
4 margin-left: 100px;
5 margin-top: 100px;
6 border: 1px solid #000;
7 transform: rotate(0deg);
8 }
9 .son{
10 position: fixed;
11 top: 50px;
12 left:50px;
13 width: 100px;
14 height: 100px;
15 background-color: red;
16 }
17 /*.son不再以欣赏器窗口作为参考点，而是以其父元素.father作为按参考点了*/

复制代码

　　3，改变absolute定位元素的宽度

　　以前，如果一个元素设置了绝对定位，并且宽度设置为100%，那么该元素的实际宽度是第一个有定位属性的祖先元素的宽度，没有则是body的宽度。现在，如果第一个有定位属性的祖先元素和绝对定位元素之间，有一个设置了transform属性的元素，那么绝对定位元素的宽度继承链将在该transform祖先元素处被截断，终极绝对定位的元素宽度将继承自transform元素。

1 .grand{
2 width: 500px;
3 height: 500px;
4 border: 1px solid #000;
5 position: absolute;
6 }
7 .father{
8 width: 100px;
9 height: 100px;
10 background-color: red;
11 transform:rotate(0deg);
12 }
13 .son{
14 width: 100%;
15 height: 200px;
16 position: absolute;
17 background-color: yellow;
18 }
19 /*.son的宽度不是500px，而变成了100px*/

复制代码

　　写在最后，transform是CSS3才引入的属性，不同欣赏器对它的实现也大概有差异，上面介绍的内容并不能包管在全部欣赏器上均有雷同的体现，详细环境请大家自行测试（我仅在Chrome 76测试）。

来源：https://www.cnblogs.com/ruhaoren/p/11596523.html

CSS动画，2D和3D模块

推广达人

突出贡献

优秀版主

荣誉管理

论坛元老