CSS3从入门到精通视频直通车：
????????CSS3从入门到精通，超多案例实践，轻松上手，通俗易懂！
一、CSS3 2D和3D转换
????????CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
它是如何工作？
????????转换的效果是让某个元素改变形状，大小和位置。
????????您可以使用 2D 或 3D 转换来转换您的元素。
浏览器支持
????????表格中的数字表示支持该属性的第一个浏览器版本号。
????????紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
????????Internet Explorer 10, Firefox, 和 Opera支持transform 属性.
????????Chrome 和 Safari 要求前缀 -webkit- 版本.
????????注意： Internet Explorer 9 要求前缀 -ms- 版本.
浏览器坐标轴:
CSS3 2D 转换
新转换属性:
| Property | 描述 |
|---|---|
| transform | 适用于2D或3D转换的元素 |
2D 转换方法:
| 函数(transform样式值) | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。x和y是像素值;可以是正数值,也可以是负数值 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。x和y是数值,表示放大或缩小的倍数; |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
translate() 方法
????????translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
????????translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
div {
transform: translate(50px,100px);
/* IE 9 */
-ms-transform: translate(50px,100px);
/* Safari and Chrome */
-webkit-transform: translate(50px,100px);
}rotate() 方法
????????rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
rotate值（30deg）元素顺时针旋转30度。
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}scale() 方法
????????scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
????????scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
div {
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
}skew() 方法
语法：
transform:skew(<angle> [,<angle>]);????????包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
????????skewX(<angle>);表示只在X轴(水平方向)倾斜。
????????skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}????????skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。
matrix() 方法(推荐多值写法,空格隔开)
????????matrix()方法把2D变换方法合并成一个。
????????matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
????????接收 6 个参数：a、b、c、d、e、f
????????其计算规则为：
????????其中，x 和 y 表示变换前矩阵偏移元素中心点的坐标；x‘ = ax + cy + e 和 y‘ = bx + dy + f 分别表示变换后的坐标。
????????中心点的坐标固定为(0, 0)，这个值与 transform-origin 的值无关；也就是说，即使 transform-origin 的值从默认的 50% 50% 被指定为 （假设）30px 30px ，其意为坐标 (0, 0) 从 50% 50% 的位置移动到 30px 30px 的位置； 30px 30px 这个点是新的中心点，其坐标为 (0, 0) 。
????????假设 matrix(1,0,0,1,30,30) ;
????????那么 x‘ 和 y‘ 分别等于 x + 30 和 y +30 ；
????????也就是说，经过矩阵转换之后，(0, 0) 变成 (30, 30) ，(1, 1) 变成 (31, 31) ，以此类推。。。直到变换元素所有的坐标都经过变化之后，在新的位置上组成了一个新的图形。
????????其结果与 translate(30px, 30px) 完全相同。
????????利用matrix()方法旋转div元素30°
div {
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}
div {
transform:scale(2,3);
rotate(30deg);
}????????深入理解矩阵:理解CSS3 transform中的Matrix(矩阵)
transform-origin
????????transform-Origin属性允许您更改转换元素的位置。
????????2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。
语法
transform-origin: x-axis y-axis z-axis;| 值 | 描述 |
|---|---|
| x-axis | 定义视图被置于 X 轴的何处。可能的值：left/center/right/length/% |
| y-axis | 定义视图被置于 Y 轴的何处。可能的值：left/center/right/length/% |
| z-axis | 定义视图被置于 Z 轴的何处。可能的值：length |
案例演示（理解）：
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
<script>
function changeRot(value)
{
document.getElementById('div2').style.transform="rotate(" + value + "deg)";
document.getElementById('div2').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.OTransform="rotate(" + value + "deg)";
document.getElementById('persp').innerHTML=value + "deg";
}
function changeOrg()
{
var x=document.getElementById('ox').value;
var y=document.getElementById('oy').value;
document.getElementById('div2').style.transformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.msTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '%';
document.getElementById('origin').innerHTML=x + "% " + y + "%";
}
</script>
</head>
<body>
<p>Rotate the red div element, try changing its X-axis and Y-axis:</p>
<div id="div1">
<div id="div2">HELLO</div>
</div>
Rotate:
<input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" />
transform: rotateY:(<span id="persp">45deg</span>);
<br><br>
X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br>
Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" />
transform-origin: <span id="origin">20% 40%</span>;
</body>
</html>
CSS3 3D 转换(了解)
????????CSS3 允许您使用 3D 转换来对元素进行格式化。
浏览器支持
????????表格中的数字表示支持该属性的第一个浏览器版本号。
????????紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
| 函数 | 描述 |
|---|---|
| matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate3d(x,y,z) | 定义 3D 转化。 |
| translateX(x) | 定义 3D 转化，仅使用用于 X 轴的值。 |
| translateY(y) | 定义 3D 转化，仅使用用于 Y 轴的值。 |
| translateZ(z) | 定义 3D 转化，仅使用用于 Z 轴的值。 |
| scale3d(x,y,z) | 定义 3D 缩放转换。 |
| scaleX(x) | 定义 3D 缩放转换，通过给定一个 X 轴的值。 |
| scaleY(y) | 定义 3D 缩放转换，通过给定一个 Y 轴的值。 |
| scaleZ(z) | 定义 3D 缩放转换，通过给定一个 Z 轴的值。 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
| rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
| rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
| rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
案例
????????多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图。
????????定义时的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。
????????注意：perspective 属性只影响 3D 转换元素。
????????值: 像素值，元素距离视图的距离，以像素计。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div0{
width: 300px;
margin: 30px;
border: 2px solid red;
perspective:1000px;
background: red;
}
#div1,#div2,#div3{
width: 200px;
height: 150px;
font-size: 50px;
margin: 30px auto;
background: green;
}
#div1:hover{
/*transform: translate3d(0,0,-300px);*/
transform:translateZ(-500px);
}
#div2:hover{
transform: rotate3d(0,1,0,45deg);
transform-origin:right;
}
#div3:hover{
transform: scaleZ(2) rotateX(60deg);
transform-origin:top;
}
body{
perspective:1000px;
}
#div0:hover{
transform:rotateX(45deg);
-webkit-transform:rotateX(45deg);
-moz-transform:rotateX(45deg);
-o-transform:rotateX(45deg);
-ms-transform:rotateX(45deg);
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">3D平移</div>
<div id="div2">3D旋转</div>
<div id="div3">3D缩放</div>
</div>
</body>
</html>二、CSS3 过渡
????????CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
它是如何工作？
????????CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
????????要实现这一点，必须规定两项内容：
-
指定要添加效果的CSS属性
-
指定效果的持续时间。
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。（以秒或毫秒计） |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 linear：规定以相同速度开始至结束的过渡效果。 ease:规定慢速开始，然后变快，然后慢速结束的过渡效果。 ease-in：规定以慢速开始的过渡效果。 ease-out：规定以慢速结束的过渡效果。 ease-in-out：规定以慢速开始和结束的过渡效果。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
????????应用于宽度属性的过渡效果，时长为 2 秒：
div {
transition: width 2s;
}
/*注意：?如果未指定的期限，transition将没有任何效果，因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：规定当鼠标指针悬浮(:hover)于 <div>元素上时：*/
div:hover {
width: 400px;
}多项改变:
????????要添加多个样式的变换效果，添加的属性由逗号分隔：
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
</style>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>在一个例子中使用所有过渡属性：
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}
div:hover
{
width:200px;
}
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div></div>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>
<p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>????????与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：
div{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}三、CSS3 动画(关键帧动画)
????????CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。
CSS3的动画属性
????????下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画。 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 linear：动画从头到尾的速度是相同的。 ease：默认。动画以低速开始，然后加快，在结束前变慢。 ease-in：动画以低速开始。 ease-out：动画以低速结束。 ease-in-out：动画以低速开始和结束。 |
| animation-fill-mode | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式(不设置)。 |
| animation-delay | 规定动画何时开始。默认是 0。定义动画开始前等待的时间，以秒或毫秒计。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 n：一个数字，定义应该播放多少次动画 infinite 指定动画应该播放无限次（永远） |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 normal 默认值。动画按正常播放。 reverse 动画反向播放。 alternate 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
CSS3 @keyframes 规则
????????要创建 CSS3 动画，你需要了解 @keyframes 规则。
????????动画是使元素从一种样式逐渐变化为另一种样式的效果。
????????您可以改变任意多的样式任意多的次数。
????????请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
????????0% 是动画的开始，100% 是动画的完成。
????????为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
????????@keyframes 规则是创建动画。
????????@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */ {
from {background: red;}
to {background: yellow;}
}CSS3 动画
????????当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
????????指定至少这两个CSS3的动画属性绑定向一个选择器：
-
规定动画的名称
-
规定动画的时长
????????把 "myfirst" 动画捆绑到 div 元素，时长：5 秒：
div {
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}????????注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
百分比关键帧动画
????????动画是使元素从一种样式逐渐变化为另一种样式的效果。
????????您可以改变任意多的样式任意多的次数。
????????请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
????????0% 是动画的开始，100% 是动画的完成。
????????为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
????????当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：
div{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}????????改变背景色和位置：
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}设置所有的属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>所有属性效果</title>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div></div>
</body>
</html>????????与上面的动画相同，但是使用了简写的动画 animation 属性：
div{
animation: myfirst 5s linear 2s infinite alternate;
/* Safari 与 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}