1、CSS3过渡
在CSS3中，可以利用transition属性使元素的某一个属性在指定的时间内从“一个属性值”平滑过渡到“另外一个属性值”，从而实现动画效果。
1）transition属性
（1）transition-duration属性
transition-duration属性表示过渡的持续时间，单位可以设置成s（秒）或ms（毫秒）。
（2）transition-property属性
transition-property属性表示对元素的哪一个属性进行过渡操作。在默认情况下，所有的值会同时变化。
（3）transition-delay属性
transition-delay属性表示执行过渡效果的延迟时间。单位同样是s（秒）或ms（毫秒）。当在复合样式transition中设置两个时间时，前面的时间表示过渡时间，后面的时间表示延迟时间。
（4）transition-timing-function属性
transition-timing-function属性表示过渡的形式，主要有linear、ease（默认值）、ease-in、ease-out、ease-in-out四个值。
匀速
逐渐慢下来
加速
减速
先加速后减速
| 可选值 | 说明 |
|---|---|
| ease | 逐渐慢下来，函数等同于贝塞尔曲线（0.25，0.1，0.25，1.0） |
| linear | 线性过渡，函数等同于贝塞尔曲线（0.0，0.0，1.0，1.0） |
| ease-in | 由慢到快，函数等同于贝塞尔曲线（0.42，0，1.0，1.0） |
| ease-out | 由快到慢，函数等同于贝塞尔曲线（0，0，0.58，1.0） |
| ease-in-out | 由慢到快再到慢，函数等同于贝塞尔曲线（0.42，0，0.58，1.0） |
| cubic-bezier | 特定的cubic-bezier曲线。（x1，y1，x2，y2）4个值特定于曲线上的点P1和点P2。所有的值需在[0，1]区域内，否则无效。 |
2）cubic-bezier值
除了简单的过渡形式之外，transition属性还提供了cubic-bezier值（贝塞尔曲线），贝塞尔曲线是应用于二维图形应用程序的数学曲线，可以通过谷歌开发工具中调节到自己想要设置的样式。
2、CSS3变形
CSS3为元素提供了变形的属性，利用这些属性可以制作多种效果的网页，提高用户体验。
1）transform属性
在CSS3中，可以使用transform属性来实现文字或图像的各种变形效果，如位移、缩放、旋转、斜切等。
（1）translate()方法
translate()方法表示元素位移的操作方法。在CSS3中，可以使用translate()方法将元素沿着水平方向（X轴）和垂直方向（Y轴）移动。translate方法与relative（相对定位）相似，元素位置的改变不会影响到其他元素。对于位移translate()方法可分为三种情况。
| translate()方法 | 描述 |
|---|---|
| translateX(x) | 元素仅在水平方向移动（X轴移动），0点坐标相对于自身位置 |
| translateY(y) | 元素仅在垂直方向移动（Y轴移动），0点坐标相对于自身位置 |
| translate(x,y) | 元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动） |
下面列出了translate()方法三种情况的演示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> .main { width: 150px; height: 150px; border: 1px black solid; } #box1 { width: 80px; height: 80px; background: red; transform: translateX(40px); } #box2 { width: 80px; height: 80px; background: red; transform: translateY(40px); } #box3 { width: 80px; height: 80px; background: red; transform: translate(40px); } </style> </head> <body> <div class="main"> <div id="box1"></div> </div> <div class="main"> <div id="box2"></div> </div> <div class="main"> <div id="box3"></div> </div> <script> </script> </body> </html>（2）scale()方法
scale()方法表示元素缩放的操作方法。缩放指的是缩小和放大。在CSS3中，可以使用scale()方法来将元素根据中心原点进行缩放。与translate()方法一样，缩放scale()方法也有三种情况。值为相对比例值，如果大于1就代表放大，如果小于1就代表缩小。
| scale()方法 | 描述 |
|---|---|
| scaleX(w) | 元素仅水平方向缩放（X轴缩放），w值为宽度缩放的比例值，默认大小比例值为1 |
| scaleY(h) | 元素仅垂直方向缩放（Y轴缩放），h值为高度缩放的比例值，默认大小比例值为1 |
| scale(w,h) | 元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放） |
（3）rotate()方法
在CSS3中，可以使用rotate()方法来将元素相对中心原点进行旋转。rotate()方法的参数单位是deg（角度）。当设置正值时表示顺时针旋转，当设置负值时表示逆时针旋转。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> .main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 80px; height: 80px; background: red; transform: rotate(45deg); } </style> </head> <body> <div class="main"> <div id="box"></div> </div> <script> </script> </body> </html>（4）skew()方法
在CSS3中可以使用skew()方法将元素斜切显示。skew()方法与translate(0方法、scale()方法一样也分为三种情况。skew()方法的参数单位与rotate()方法一样，需要设置倾斜的角度。当设置正值时表示顺时针斜切，当设置负值时表示逆时针斜切。
| skew()方法 | 描述 |
|---|---|
| skewX(x) | 使元素在水平方向倾斜（X轴倾斜） |
| skewY(y) | 使元素在垂直方向倾斜（Y轴倾斜） |
| skew(x,y) | 使元素在水平方向和垂直方向同时倾斜（X轴和Y轴同时倾斜） |
下面列出了skew()方法三种情况的演示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> .main { width: 150px; height: 150px; border: 1px black solid; } #box1 { width: 80px; height: 80px; background: red; transform: skewX(30deg); } #box2 { width: 80px; height: 80px; background: red; transform: skewY(30deg); } #box3 { width: 80px; height: 80px; background: red; transform: skew(30deg, 30deg); } </style> </head> <body> <div class="main"> <div id="box1"></div> </div> <div class="main"> <div id="box2"></div> </div> <div class="main"> <div id="box3"></div> </div> <script> </script> </body> </html>变形的方法可以组合使用，但要注意顺序，即由后向前执行。translate()位移方法与其他方法会被前面的方法影响。
translate()位移方法与其他方法会被前面的方法影响。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #box1 { width: 80px; height: 80px; background: red; } #box2 { width: 80px; height: 80px; background: red; transform: translateX(100px) scale(0.5, 0.5); } #box3 { width: 80px; height: 80px; background: red; transform: scale(0.5, 0.5) translateX(100px); } </style> </head> <body> <div id="box1"></div> <div id="box2"></div> <div id="box3"></div> <script> </script> </body> </html>2）transform-origin属性
CSS3中位移、缩放、旋转、倾斜默认都是以元素的中心原点进行变形。在CSS3中，可以通过transform-origin属性改变元素变形时中心原点位置。其属性值可以采用长度值和关键字两种取值方式。长度值一般使用百分比作为单位。使用transform-origin属性时，水平方向和垂直方向都需要设置其对应的值。transform-origin属性取值与背景位置background-position属性取值相似。
| 关键字 | 长度值 | 中心原点位置 |
|---|---|---|
| top left | 0 0 | 左上 |
| top center | 50% 0 | 靠上居中 |
| top right | 100% 0 | 右上 |
| left center | 0 50% | 靠左居中 |
| center center | 50% 50% | 正中 |
| right center | 100% 50% | 靠右居中 |
| bottom left | 0 100% | 左下 |
| bottom center | 50% 100% | 靠下居中 |
| bottom right | 100% 100% | 右下 |
以左上角位置为原点进行斜切设置的演示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 200px; height: 200px; border: 1px black solid; } #box { width: 100px; height: 100px; background: red; transform: skew(30deg, 30deg); transform-origin: left top; } </style> </head> <body> <div id="main"> <div id="box"></div> </div> <script> </script> </body> </html>3、CSS3动画
1）animation属性
在CSS3中，用animation属性实现动画效果。animation属性和transition属性功能相同都是通过改变元素的“属性值”来实现动画效果，但这两者又有很大的区别transition属性只能通过指定属性的开始值与结束值，再在这两个属性值之间进行平滑过渡来实现动画效果，因此只能实现简单的动画效果。animation属性则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。
animation属性是一个复合属性，主要包含animation-duration、animation-name、animation-delay、animation-iteration-count和animation-timing-function，animation-direction六个子属性。
（1）animation-duration属性
animation-duration属性表示动画的持续时间，单位可以设置成s（秒）或者ms（毫秒）。
（2）animation-name属性
animation-name属性表示动画的名称，可以通过@keyframes关键帧样式来找到对应的动画名。
动画名称
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } </style> </head> <body> <div id="main"> <div id="box"></div> </div> <script> </script> </body> </html>动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move; } @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(100px, 0); } 50% { transform: translate(100px, 100px); } 75% { transform: translate(0, 100px); } 100% { transform: translate(0, 0); } } </style> </head> <body> <div id="main"> <div id="box"></div> </div> <script> </script> </body> </html>通过animation-name属性可以找到指定的@keyframes关键帧对应的样式。
（3）animation-delay属性
animation-delay属性表示执行动画效果的延迟时间，单位是s（秒）或ms（毫秒）。在复合样式animation中设置两个时间时，前面的时间表示动画时间，后面的时间表示延迟时间。animation-delay属性与transition-delay属性效果类似。
（4）animation-iteration-count属性
animation-iteration-count属性表示动画的执行次数，默认整个动画执行一次，可以设置一个infinite值，表示执行无限次。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move 3; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } </style> </head> <body> <div id="main"> <div id="box"></div> </div> <script> </script> </body> </html>（5）animation-timing-function属性
animation-timing-function属性表示动画的形式，与transition-timing-function的过渡形式完全一样，默认情况下是ease样式。
2）animation-fill-mode属性
animation-fill-mode属性可控制动画停止的位置。通过animation-fill-mode属性可以让元素运动结束后，停止在结束位置。其属性值有forwards和backwards两个常见值。forwards值表示动画结束之后继续应用最后的关键帧位置，backwards值表示会在元素应用动画样式时迅速应用动画的初始帧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; animation: 1s move; animation-fill-mode: forwards; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } </style> </head> <body> <div id="main"> <div id="box"></div> </div> <script> </script> </body> </html>3）animation-direction属性
在CSS3中，可以使用animation-direction属性定义动画的播放方向，其属性值有normal、reverse、alternate三个常见值。normal值为默认值，表示每次循环都向正方向播放，而reverse值则正好相反，每次循环都向反方向播放。alternate值表示播放次数为奇数时，动画向原方向播放；播放次数是偶数时，动画向反方向播放。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #box1 { width: 50px; height: 50px; background: red; animation: 2s move 3; animation-direction: reverse; } #box2 { width: 50px; height: 50px; background: red; animation: 2s move 3; animation-direction: alternate; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } </style> </head> <body> <div id="box1"></div><br> <div id="box2"></div> <script> </script> </body> </html>4）animation-play-state属性
在CSS3中可以使用animation-play-state属性来定义动画的播放状态，其属性值可以设置为running和paused两个值。running值表示播放动画（默认值），paused值表示暂停动画。一般情况下都是通过JavaScript方式进行播放、暂停的控制。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #box { width: 100px; height: 100px; background: red; animation: 1s move; animation-play-state: paused; } @keyframes move { 0% { transform: translate(0, 0); } 100% { transform: translate(100px, 0); } } </style> </head> <body> <input type="button" value="播放" id="btn"> <div id="box"></div><br> <script> var btn = document.getElementById('btn'); var box = document.getElementById('box'); var onoff = true; btn.onclick = function() { if (getComputedStyle(box).animationPlayState == 'paused') { box.style.animationPlayState = 'running'; this.value = '暂停'; } else { box.style.animationPlayState = 'paused'; this.value = '播放'; } } </script> </body> </html>4、CSS3之3D
3D即三维空间，是指在平面二维系中又加入了一个方向向量构成的空间系。3D指的是坐标轴的三个轴，即x轴、y轴、z轴，其中x表示左右空间，y表示上下空间，z表示前后空间，这样就形成了视觉立体感。
1）transform3D属性
（1）rotateX()方法
rotateX()方法元素会沿着x轴进行旋转，在页面中垂直上下方向进行翻转。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateX(180deg); } </style> </head> <body> <div id="main"> <div id="box">CSS3</div> </div> <script> </script> </body> </html>（2）rotateY()方法
rotateY()方法元素会沿着y轴进行旋转，在页面中会左右方向进行翻转。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateY(180deg); } </style> </head> <body> <div id="main"> <div id="box">CSS3</div> </div> <script> </script> </body> </html>（3）rotateZ()方法
rotateZ()方法元素会沿着z轴进行旋转，与rotate()方法展示的旋转效果一样。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateZ(180deg); } </style> </head> <body> <div id="main"> <div id="box">CSS3</div> </div> <script> </script> </body> </html>（4）translateZ()方法
translateZ()方法元素会沿着z轴进行位移。当值为正数时，元素会垂直于屏幕向前移动，元素显示会变大；当值为负数时，元素会垂直于屏幕向后移动，显示出的元素会变小。需要配合perspective属性使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; perspective: 100px; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: translateZ(50px); } </style> </head> <body> <div id="main"> <div id="box">CSS3</div> </div> <script> </script> </body> </html>（5）scaleZ()方法
scaleZ()方法会沿着z轴进行缩放。只有在3D空间中的元素才具备z轴的缩放处理功能。
2）perspective
如果要让页面具备三维空间，首先要设置perspective属性。
perspective属性表示景深的设置。景深是指在摄像机镜头或其他成像器前沿能够取得清晰图像的成像所测定的被摄物体前后距离范围。简而言之，就是用户观察元素的距离元素。当景深的值越小，3D幅度越大，即离观察的元素比较近；当景深的值越大，3D幅度越小，即离观察的元素比较远。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px black solid; perspective: 50px; } #box { width: 50px; height: 50px; background: red; color: white; margin: 50px; transition: 1s; } #main:hover #box { transform: rotateY(180deg); } </style> </head> <body> <div id="main"> <div id="box">CSS3</div> </div> <script> </script> </body> </html>3）transform-style属性
网页添加景深，但是对于多个组合的元素，还必须添加transform-style属性为preserve-3d值让组合元素产生空间厚度，才可以显示出3D的效果。
4）perspective-origin属性
perspective-origin属性用来显示景深的观察原点，可以通过改变这个属性值，从不同的视角去观察3D元素。
5）backface-visibility属性
backface-visibility属性用来设置3D元素背面隐藏操作。可以通过设置backface-visibility属性为hidden值。hidden值可以把背面的元素进行隐藏处理。
利用backface-visibility属性来完成的一个实际例子。有两个层叠加在一起，把鼠标移入前面的层会翻转到后面的层，利用背面隐藏特性可以很好地隐藏翻转到后面的层。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>CSS3</title> <style> #main { width: 150px; height: 150px; border: 1px #000000 solid; position: relative; } #box { width: 50px; height: 50px; position: absolute; left: 50px; top: 50px; perspective: 50px; } #box div { width: 50px; height: 50px; position: absolute; backface-visibility: hidden; transition: 1s; } #box div:nth-of-type(1) { background: red; transform: rotateY(0deg); } #box div:nth-of-type(2) { background: blue; transform: rotateY(-180deg); } #main:hover #box div:nth-of-type(1) { background: red; transform: rotateY(180deg); } #main:hover #box div:nth-of-type(2) { background: blue; transform: rotateY(0deg); } </style> </head> <body> <div id="main"> <div id="box"> <div>HTML</div> <div>CSS</div> </div> </div> <script> </script> </body> </html>
