本文详细介绍了CSS3的转换、过渡和动画特性。转换包括2D和3D，涉及translate()、scale()、rotate()、skew()等函数；过渡详细解释了transition属性的各子属性；动画讲解了@keyframes的使用和animation属性的配置。
前端学习之CSS3
一、CSS3转换
1.定义
转换可以对元素进行移动、旋转、缩放、倾斜等，转换就是让某个元素发生形状、大小、位置上的改变。
2.语法
转换的语法如下：
transform:none | <transform-function>*;/*默认值为none*/
none代表不应用任何的转换，而表示要应用的一个或多个CSS变换函数，变换函数主要包括有：
2D转换：平面上的移动、旋转、缩放、倾斜。
3D转换：三维立体上的移动、旋转、缩放。
3.2D转换
2D转换的函数主要包括有：
translate()：移动；
scale()：缩放；
rotate()：旋转；
skew()：倾斜。
这里先附上一张空间上的图示，以下文章会用到：
translate()
translate(n)表示元素沿着X轴和Y轴移动，translateX(n)表示沿着X轴，translate(n)表示沿着Y轴。具体示例如下：
还未设置移动时：
<!DOCTYPE html>
<html lang="zh">
<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></title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #00FFFF;
text-align: center;
line-height: 50px;
position: absolute;
}
.box1{
width: 500px;
height: 500px;
background-color: #FF4400;
opacity: 0.8;
position: absolute;
left: 0;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box">
<i class="box1"></i>
</div>
</body>
</html>
结果：
设置了偏移后：
.box i{
transform: translateX(100px);
}
结果：
当值为负值则向左偏移，Y轴偏移同理，就不作演示了。同时translate可以对两个方向同时设置偏移量，语法是：translate(x, y);如果只设置一个参数，会默认第二个参数为0。
scale()
scale()表示元素在X轴和Y轴的缩放。scaleX(n)表示在X轴上的缩放，scaleY(n)表示在Y轴上的缩放。值默认为1，当n>1时，元素放大，当0<n<1时，元素缩小，具体示例如下（与translate同理）：
.box i{
transform: scale(0.8, 0.5);
}
结果：
与translate()不同的是，如果scale()只设置一个参数，会默认两个参数值都一样。
rotate()
rotate()表示元素顺时针给定的角度，负数表示逆时针旋转，角度图示如下：
如这里设置顺时针旋转45度：
.box i{
transform: rotate(45deg);
}
skew()
skew()表示元素在二维平面上的倾斜转换。
skewX(xdeg)表示基于X轴的倾斜，x取值为正时，X轴不动，Y轴逆时针倾斜一定角度，x为负，Y轴顺时针倾斜。
示例：
.box i{
transform: skewX(10deg);
}
结果：
为负值时：
.box i{
transform: skewX(-30deg);
}
结果：
skewY()与skewX()同理，这里就不作演示了，skew()同样可以写入两个参数，如果只写入一个参数的话，则默认基于X轴倾斜。
以上这些函数的使用都有涉及到基点，基点默认就是元素的中心点，基点也可以通过属性来设置：
transform-orgin: center;
基点的位置可以通过坐标来设置，例如我们这边设置成“0 0”：
.box i{
transform-origin: 0 0;
transform: rotate(50deg);
}
可以很清楚地看出来，旋转的位置发生的变化：
基点的位置值还可以通过bottom、left等来设置，这样子设置就是以边的中心点为基点。
4.3D转换
1.定义
3D转换是在三维空间上的移动、旋转、缩放。3D转换的函数对应有：
translate3d()：移动；
rotate3d()：旋转；
scale3d()：缩放。
3D坐标轴图示：
图中的蓝色小人代表用户于屏幕前观看的状态。下面来介绍一下这三个函数的使用。
translate()
translate()用于设置元素的移动，这里相对于2D多了个translateZ()的方法，由于屏幕显示的二维的图像，这里我们为了能够看到3D变换的效果，需要设置一个perspective属性。
perspective表示观察者与z=0平面的距离，可以使三维位置变换的元素产生透视效果，当perspective值为none时，是默认取值；当值为长度的时候有透视变换效果，并且perspective属性需要设置在父元素上，具体使用如下：
未设置perspective时：
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #00FFFF;
text-align: center;
line-height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
/* perspective: 50px; */
}
.box1{
width: 500px;
height: 500px;
background-color: #FF4400;
opacity: 0.8;
position: absolute;
left: 0;
text-align: center;
line-height: 50px;
}
.box i{
transform: translateZ(10px);
}
</style>
看不出效果：
设置了之后：
同样地，translate3d()函数也可以设置元素在三维方向上的位移，不过这里三个参数缺一不可。
这里再拓展一个属性，perspective-origin：用于指定观察者的视角位置，即观察者视线的中心点，语法：
perspective-origin: x-position y-position;
除了坐标的形式，还可以设置成top left（左上角）等等的形式。
rotate()
rotate()可以设置相对于X轴、Y轴、Z轴元素的旋转，具体使用如下：
rotateX()：
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #00FFFF;
text-align: center;
line-height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
perspective: 500px;
}
.box1{
width: 500px;
height: 500px;
background-color: #FF4400;
opacity: 0.8;
position: absolute;
left: 0;
text-align: center;
line-height: 50px;
}
.box i{
transform: rotateX(45deg);
/*为正值时向内翻转，反之向外*/
}
</style>
结果：
rotateY()：
.box i{
transform: rotateY(45deg);
/*正值向右方向翻转，反之向左*/
}
结果：
rotateZ()：
.box i{
transform: rotateZ(30deg);
/*正值向顺时针，反之逆时针*/
}
结果：
rotate3d()简写：
transform:rotate3d(x,y,z,a);
这里的(x, y, z)表示矢量，a表示旋转角度，以坐标原点到(x, y , z)矢量为旋转轴，并根据左手定则，旋转a角度。
scale()
scale()定义了元素的3D缩放，同样的也有三个方向，X、Y、Z分别对应三个轴方向上厚度的变化，这里就不作演示了，scale3d()也可以进行缩写，三个参数也是缺一不可。
5.拓展属性transform-style
transform-style用于设置元素的子元素是位于3D还是平面中，常见的值有：
flat：默认取值，子元素位于平面中；
preserve-3d：子元素位于3D空间中，并且设置这个属性的时候，必须设置在父元素上，并且子元素有变形，才可以看到效果。
6.拓展属性backface-visibility
backface-visibility用于设置当元素背向观察者时是否可见，常见的值有：
visible：默认值，背面是可见的；
hidden：背面不可见。
演示如下：
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #00FFFF;
text-align: center;
line-height: 50px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
perspective: 500px;
}
.box1{
width: 500px;
height: 500px;
background-color: #FF4400;
opacity: 0.8;
position: absolute;
left: 0;
text-align: center;
line-height: 50px;
}
.box i{
transform: rotateY(91deg);
backface-visibility: hidden;
}
</style>
由于这边的角度设置成了大于90度，所以，这时候元素成为了背面，会被隐藏，在页面中就看不到了：
二、CSS3过渡
1.定义
CSS3过渡指的是元素从一种样式逐渐转变为另一种样式的效果。一般可以通过:hover、:focus、:active、:checked、或js触发。
2.相关属性
transition-property
transition-property可以设置需要过渡效果的属性。常见的值有：
all：默认值，所有的属性都会获得过渡效果。
none：没有属性会获得过渡效果。
property：应用过渡效果的CSS属性列表，逗号分隔。
transition-duration
transition-duration可以设置过渡效果花费的时间。值为具体时间。
以上两个属性演示如下：
<!DOCTYPE html>
<html lang="zh">
<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></title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #00FFFF;
text-align: center;
position: absolute;
line-height: 50px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
}
.box:hover{
width: 500px;
height: 500px;
background-color: #FF4400;
text-align: center;
position: absolute;
line-height: 50px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
transition-property: all;
/*也可以设置成background-color、width等其他单个或多个属性，用逗号隔开*/
transition-duration: 1s;
/*也可以根据上面选择属性个数为不同的属性设置不同的时间，用逗号隔开*/
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
结果会发生过渡的效果，这里博主不太好截图，大家可以把代码复制运行一下。
transition-timing-function
transition-timing-function可以设置过渡效果的速度曲线。常见的值有：
ease：默认值，先慢后快再慢，平滑地过渡。
ease-in：慢速开始的过渡效果。
ease-out：慢速结束的过渡效果。
ease-in-out：慢速开始和结束的过渡效果。
linear：以相同的速度开始至结束的过渡效果。
代码：
.box:hover{
width: 400px;
height: 400px;
background-color: #FF4400;
text-align: center;
position: absolute;
line-height: 50px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
transition-property: background-color,width;
transition-duration: 1s;
transition-timing-function: ease-in;
}
由于是动态的，这边就不给大家截图啦，大家可以自己试试各个值不一样的效果。
transition-delay
ransition-delay可以设置过渡开始前的等待时间。单位为秒或毫秒，默认值为0。上面有提到样式的变化可以选择自己想要变化的属性，而transition-delay也可以让指定的属性在延迟后进行变化，语法：
transition: 0s, 1s;
transition
transition是对上述属性的简写。语法对应的是：
transition: property duration timing-function delay;
值对应的就是上面的几个属性。
三、CSS3动画
1.定义
CSS3动画指的是让元素从一种样式逐渐变化为另一种样式的效果，且无需使用Flash动画或JavaScript。
2.过渡和动画的区别
过渡和动画的定义是类似的，但是过渡与动画还是有着一些区别：
1.过渡需要事件触发，动画不需要。
2.过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个，可以改变任意多的样式、任意多的次数。
3.动画的使用
@keyframes：创建动画规则。
语法：
@keyframes animationname{
keyframes-selector{
/*css代码*/
}
}
animation：调用动画，并规定播放规则。具体使用如下：
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #00FFFF;
text-align: center;
position: absolute;
line-height: 50px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
animation: change 5s;
}
@keyframes change{
from{/*from表示从0%开始*/
background-color: #00FFFF;
transform: translateX(100px);
}
to{/*to表示100%*/
background-color: #FF4400;
transform: translateX(500px);
}
}
</style>
也可以不适用from，to，而设置具体的值：
@keyframes change{
0%{
background-color: #00FFFF;
transform: translateX(100px);
}
50%{
background-color: #000;
}
100%{
background-color: #FF4400;
transform: translateX(500px);
}
}
animation也可以设置一些其他属性，类似于过渡：
animation-name：使用的动画名称。
animation-duration：动画完成一个周期需要的时间。
animation-delay：动画开始前的等待时间。
animation-timing–function：动画的速度曲线。
这几个属性就不再做演示了，和过渡类似。
animation还可以设置一些其他的属性，如：
animation-iteration-count：动画的播放次数。
animation-direction：动画播放方向。normal是默认值，reverse是反向播放，alternate是奇数次正向偶数次方向，alternate-reverse是奇数次反向偶数次正向
animation-play-state：动画的状态，播放或者暂停。running是默认值，表示正在播放，paused表示暂停，一般是在js代码中使用该属性。
animation-fill-mode：对象在动画时间之外的状态。常见的属性有：
none：默认值。
forwards：动画完成后，保持最后一个样式。
backwards：动画开始之前的样式。
both：向前和向后填充模式都被应用。
接下来将以上属性一起做个演示：
<!DOCTYPE html>
<html lang="zh">
<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></title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background-color: #00FFFF;
text-align: center;
position: absolute;
line-height: 50px;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
animation-name: change;
animation-duration: 5s;
animation-delay: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes change{
0%{
background-color: #00FFFF;
transform: translateX(100px);
}
50%{
background-color: #000;
}
100%{
background-color: #FF4400;
transform: translateX(500px);
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
animation简写：
animation: name duration timing-function delay iteration-count direction;
这一部分的内容到这里就结束啦，不足的地方希望大家可以帮我指出来，蟹蟹！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
