欢迎光临
你好
我是阿ken
日子不哭何来甘甜
9.1 过渡
CSS3 提供了强大的过渡属性，它可以在不使用 Flash 动画或者 JavaScript 脚本的情况下，为元素从一种样式转变为另一种样式时添加效果， 如渐显、渐弱、动画快慢等。在 CSS3 中，过渡属性主要包括 transition-property、transition-duration、transition-timing-function、transition-delay，本节将分别对这些过渡属性进行详细讲解。
9.1.1 transition-property 属性
transition-property 属性用于指定应用过渡效果的 CSS 属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。当指定的 CSS 属性改变时，过渡效果才开始。其基本语法格式如下：
transition-property: none | all | property;
在上面的语法格式中，transition-property 属性的取值包括none、all 和 poperty 三个，
transition-property 属性值
| 属性值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果 |
| all | 所有属性都将获得过渡效果 |
| property | 定义应用过渡效果的 CSS 属性名称，多个名称之间以逗号分隔 |
案例：演示 transition-property 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transition-property 属性</title>
<style type="text/css">
div {
width: 400px;
height: 100px;
background-color: red;
font-weight: bold;
color: #FFF;
}
div:hover {
background-color: blue;
/* 指定动画过渡的css属性 */
-webkit-transition-property: background-color;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-property: background-color;
/*Eirefox 浏览器兼容代码*/
-o-transition-property: background-color;
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>使用 transition-property 属性改变元素背景色</div>
</body>
</html>
当鼠标指针放在红色盒子上，
在上述案例中，通过 transition-property 属性指定产生过渡效果的 CSS 属性为 background-color，并设置了鼠标移上时背景颜色变为蓝色，同时为了解决浏览器的兼容性问题，分别添加了不同的浏览器的前缀兼容代码。
当鼠标指针悬浮到网页中的 < div> 区域时，背景色立刻由红色变为蓝色，而不会产生过渡。这是因为在设置 " 过渡 " 效果时，必须使用 transition-duration 属性设置过渡时间，否则不会产生过渡效果。
9.1.2 transition-duration 属性
transition-duration 属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒 (s) 或者毫秒 (ms)，其基本语法格式如下：
transition-duration: time;
案例：演示 transition-duration 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transition-duration 属性</title>
<style type="text/css">
div {
width: 150px;
height: 150px;
margin: 0 auto;
background-color: yellow;
border: 2px solid #00f;
color: #000;
}
div:hover {
background-color: red;
/* 指定动画过渡的css属性 */
-webkit-transition-property: background-color;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-property: background-color;
/*Firefox浏览器兼容代码*/
-o-transition-property: background-color;
/*opera浏览器兼容代码*/
/*指定动画过渡的时间*/
-webkit-transition-duration: 5s;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-duration: 5s;
/*Firefox 浏览器兼容代码*/
-o-transition-duration: 5s;
/*Opera 浏览器兼容代码*/
}
</style>
</head>
<body>
<div>使用 transition-duration 属性设置过渡时间</div>
</body>
</html>
当把鼠标指针放在盒子上的时候，盒子的颜色会逐渐由黄色变为红色
在上述案例中，通过 transition-property 属性指定产生过渡效果的 CSS 属性为 background-color，并设置了鼠标移上时背景颜色变为红色。同时，使用 transtion-duration 属性来定义过渡效果需要花费 5 秒的时间。当鼠标指针悬浮到网页中的 < div> 区域时，黄色背景将逐渐过度为红色背景。
9.1.3 transition-timing-function 属性
transition-timing-function 属性规定过渡效果的速度曲线，默认值为 " ease " ，其基本语法格式如下：
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n, n, n, n);
从上述语法可以看出，transition-timing-function 属性的取值有很多，
transition-timing-function 属性值
| 属性值 | 描述 |
|---|---|
| linear | 指定以相同速度开始至结束的过渡效果，等同于cubic-bezier(0, 0, 1, 1) |
| ease | 指定以慢速开始，然后加快，最后慢慢结束的过渡效果，等同于 cubic-bezier(0.25, 0.1, 0.25, 1) |
| ease-in | 指定以慢速开始，然后逐渐加快(淡入效果)的过渡效果，等同于 cubic-bezier (0.42, 0, 1, 1) |
| ease-out | 指定以慢速结束 (淡出效果) 的过渡效果，等同于 cubic-bezier (0, 0, 0.58, 1) |
| ease-in-out | 指定以慢速开始和结束的过渡效果，等同于cubic- bezier(0.42, 0, 0.58, 1) |
| cubic-bezier(n, n, n, n) | 定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0 ~1 |
案例：演示 transition-timing-function 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transition-timing-function 属性</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: yellow;
border: 5px solid red;
border-radius: 0px;
}
div:hover {
border-radius: 105px;
/*指定动画过渡的css属性*/
-webkit-transition-property: border-radius;
/*safari and Chrome浏览器兼容代码*/
-moz-transition-property: border-radius;
/*Firefox 浏览器兼容代码*/
-o-transition-property: border-radius;
/*Opera浏览器兼容代码*/
/*指定动画过渡的时间*/
-webkit-transition-duration: 5s;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-duration: 5s;
/*Firefox浏览器兼容代码*/
-o-transition-duration: 5s;
/*Opera浏览器兼容代码*/
/*指定动画以慢速开始和结束的过渡效果*/
-webkit-transition-timing-function: ease-in-out; /*Safari and Chrome 浏览器兼容代码*/
-moz-transition-timing-function: ease-in-out;
/*Firefox浏览器兼容代码*/
-o-transition-timing-function: ease-in-out;
/*Opera浏览器兼容代码*//*第二十八行代码*/
}
</style>
</head>
<body>
<div>transition-timing-function 属性</div>
</body>
</html>
当鼠标指针放在盒子上时，就会发生以下变化
在上述案例中，通过 transition-property 属性指定产生过渡效果的 CSS 属性为 " border-radius " 并指定过渡动画由正方形变为正圆形。然后使用 transition-duration 属性定义过渡效果需要花费 5 秒的时间，同时使用 transition-timing-function 属性规定过渡效果以慢速开始和结束。当鼠标指针悬浮到网页中的 < div> 区域时，过渡的动作将会被触发，正方形将慢速开始变化，然后逐渐加速，随后慢速变为正圆形。
9.1.4 transition-delay 属性
transition-delay 属性规定过渡效果何时开始，默认值为0,常用单位是秒 (s) 或者毫秒 (ms) 。transition-delay 的属性值可以为正整数、负整数和0。当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；设置为正数时，过渡动作会延迟触发。其基本语法格式如下：
transition-delay: time;
案例：在上个案例基础上演示 transition-delay 属性的用法，在第二个 css 样式内增加如下样式，
/*指定动画延迟触发*/
-webkit-transition-delay: 2s;
/*Safari and Chrome浏览器兼容代码*/
-moz-transition-delay: 2s;
/*Firefox浏览器兼容代码*/
-o-transition-delay: 2s;
/*Opera浏览器兼容代码*/
上述案例使用 transition-delay 属性指定过渡的动作会延迟 2s 触发。
当鼠标指针悬浮到网页中的 < div> 区域时，经过 2s 后过渡的动作会被触发，正方形慢速开始变化，然后逐渐加速，随后慢速变为正圆形。
9.1.5 transition 属性
transition 属性是一个复合属性， 用于在一个属性中设置 transition-property、transition-duration、transition-timing -function、transition-delay 四个过渡属性。其基本语法格式如下。
transition: property duration timing-function delay;
在使用 transition 属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。如上次案例中设置的四个过渡属性，可以直接通过如下代码实现。
transition: border-radius 5s ease-in-out 2s;
- 注意:
_
无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用 transition 简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。
9.2 变形
在 CSS3 之前，如果需要为页面设置变形效果，需要依赖于图片、Flash 或 JavaScript 才能完成。CSS3 出现后，通过 transform 属性就可以实现变形效果，如移动、倾斜、缩放以及翻转元素等。
9.2.1 认识 transform
2012年9月，W3C组织发布了 CSS3 变形工作草案，这个草案包括了 CSS 2D 变形和 CSS3 3D 变形。
CSS3 变形是一系列效果的集合， 如平移、旋转、缩放和倾斜，每个效果都被称作为变形函数(Tranfom
Fucio)，它们可以操控元素发生平移、旋转、缩放和倾斜等变化。这些效果在 CSS3 之前都需要依赖图片、Flash 或 Javascript 才能完成。现在，使用纯 CSS3 就可以实现这些变形效果，而无需加收额外的文件，这极大地提高了网页开发者的工作效率，提高了页面的执行速度。
CSS3 的变形（transform）属性可以让元素在一个坐标系统中变形。这个属性包含一系列变形函数，可以进行元素的移动、旋转和缩放。transform 属性的基本语法如下：
transform: none|transform-functions;
在上面的语法格式中，transform 属性的默认值为 none，适用于内联元素和块元素，表示不进行变形。transform-function 用于设置变形函数，可以是一个或多个变形函数列表。transform-function 函数包括 matrix()、translate()、scale()、rotate() 和 skew() 等。具体说明如下：
-
matrix(): 定义矩形变换，即基于X和Y坐标重新定位元素的位置。
-
translate(): 移动元素对象，即基于 X 和 Y 坐标重新定位元素。
-
scale(): 缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数。负数和小数。
-
rotate(): 旋转元素对象，取值为一个度数值。
-
skew(): 倾斜元素对象，取值为一个度数值。
9.2.2 2D 转换 ( transform 属性 )
在 CSS3 中，使用 transform 属性可以实现变形效果，主要包括4种变形效果，分别是: 平移、缩放、倾斜和旋转。
1. 平移 ( translate() 方法 )
使用 translate() 方法能够重新定义元素的坐标，实现平移的效果。该函数包含两个参数值，分别用于定义 X 轴和 Y 轴坐标，其基本语法格式如下:
transform: translate (x-value, y-value);
在上述语法中，x-value 指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值 0。当值为负数时，表示反方向移动元素。
在使用 translate() 方法移动元素时，基点默认为元素中心点，然后根据指定的X坐标和Y坐标进行移动。
案例：演示 translate() 方法的使用
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>translate() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
transform: translate(100px, 30px);
-ms-transform:translate(100px, 30px);
/* IE9浏览器兼容代码*/
-webkit-transform:translate(100px, 30px);
/*Safari and Chrome 浏览器兼容代码*/
-moz-transform:translate(100px, 30px);
/*Firefox浏览器兼容代码*/
-o-transform:translate(100px, 30px);
/*Opera 浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是元素原来的位置</div>
<div id="div2">我是元素平移后的位置</div>
</body>
</html>
在上述案例中，使用 < div> 标记定义两个样式完全相同的盒子。然后，通过 translate() 方法将第二个 < div> 沿X坐标向右移动100像素，沿Y坐标向下移动30像素。
2. 缩放 ( scale() 方法 )
scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。元素尺寸的增加或减少，由定义的宽度 ( X轴 ) 和高度 ( Y轴 ) 参数控制，其基本语法格式如下：
transform: scale(x-axis, y-axis);
在上述语法中，x-axis 和 y-axis 参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是翻转元素(如文字被反转), 然后再缩放元素。如果第二个参数省略，则第二个参数等于第一 个参数值。另外，使用小于1的小数可以缩小元素。
案例：演示 scale() 方法的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>scale() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
margin: 100px;
transform: scale(2, 3);
-ms-transform: scale(2,3);
/*IE9浏览器兼容代码*/
-webkit-transform: scale(2, 3);
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: scale(2,3);
/*Firefox浏览器兼容代码*/
-o-transform: scale(2, 3);
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是原来的元素</div>
<div id="div2">我是放大后的元素</div>
</body>
</html>
在上述案例中，使用 < div> 标记定义两个样式相同的盒子。并且，通过 scale() 方法将第二个 < div> 的宽度放大两倍，高度放大三倍。
3. 倾斜 ( skew() 方法 )
skew() 方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义 X 轴和 Y 轴坐标倾斜的角度。skew() 可以将一个对象围绕着 X 轴和 Y 轴按照一定的角度倾斜，其基本语法格式如下。
transform: skew(x-angle, y-angle);
在上述语法中，参数 x-angle 和 y-angle 表示角度值，第一个参数表示相对于 X 轴进行倾斜，第二个参数表示相对于 Y 辅进行倾斜，如果省略了第二个参数，则取默认值 0。
案例：演示 skew() 方法的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>skew() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
transform: skew(30deg, 10deg);
-ms-transform: skew(30deg, 10deg);
/*IE9浏览器兼容代码*/
-webkit-transform: skew(30deg, 10deg);
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: skew(30deg, 10deg);
/*Firefox 浏览器兼容代码*/
-o-transform: skew(30deg, 10deg);
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是原来的元素</d1v>
<div id="div2">我是倾斜后的元素</div>
</body>
</html>
在上述案例中，使用 < div> 标记定义了两个样式相同的盒子。并且，通过 skew() 方法将第二个 < div> 元素沿 X 轴倾斜 30°，沿Y轴倾斜 10°。
4. 旋转 ( rotate() 方法 )
rotate() 方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。其基本语法格式如下：
transform: rotate(angle);
在上述语法中，参数 angle 表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。
案例：演示 rotate() 方法的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>rotate() 方法</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/*IE9浏览器兼容代码*/
-webkit-transform: rotate(30deg);
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: rotate(30deg);
/*Firefox 浏览器兼容代码*/
-o-transform: rotate(30deg);
/*Opera浏览器兼容代码*/
}
</style>
</head>
<body>
<div>我是元素原来的位置</div>
<div id="div2">我是元素旋转后的位置</div>
</body>
</html>
使用 < div>标记定义两个样式相同的盒子。并且，通过rotate() 方法将第二个 < div> 元素沿顺时针方向旋转30°。
- 注意:
_
如果一个元素需要设置多种变形效果，可以使用空格把多个变形属性值隔开。
5. 更改变换的中心点 ( transform-origin 属性 )
通过 transform 属性可以实现元素的平移、缩放、倾斜及旋转效果，这些变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用 transform-origin 属性，其基本语法格式如下:
transform-origin: x-axis y-axis z-axis;
在上述语法中，transform-origin 属性包含三个参数，其默认值分别为 50% 50% 0，
transform-origin 参数说明
| 参数 | 描述 |
|---|---|
| x-axis | 定义视图被置于x轴的何处。可能的值有：left、center、right、length、% |
| y-axis | 定义视图被置于Y轴的何处。可能的值有：top、center、bottom、length、% |
| z-axis | 定义视图被置于z轴的何处。可能的值有：length |
案例：演示 transform-origin 的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>transform-origin 属性</title>
<style type="text/css">
#div1 {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
padding: 10px;
border: 1px solid black;
}
#box02 {
padding: 20px;
position: absolute;
border: 1px solid black;
background-color: red;
transform: rotate(45deg);
/* 旋转 45° */
-webkit-transform: rotate(45deg);
/*Safari and Chrome 浏览器兼容代码*/
-ms-transform: rotate(45deg);
/*IE9 浏览器兼容代码 */
transform-origin: 20% 40%;
/*更改原点坐标的位置*/
-webkit-transform-origin: 20% 40%;
/*Safari and Chrome 浏览器兼容代码*/
-ms-transform-origin: 20% 40%;
/*IE9 浏览器兼容代码 */
}
#box03 {
padding: 20px;
position: absolute;
border: 1px solid black;
background-color: #FF0;
transform: rotate(45deg);
/* 旋转 45° */
-webkit-transform: rotate(45deg);
/*Safari and Chrome 浏览器兼容代码*/
-ms-transform: rotate(45deg);
/*IE9 浏览器兼容代码*/
}
</style>
</head>
<body>
<div id="div1">
<div id="box02">更改原点坐标位置</div>
<div id="box03">原来元素坐标位置</div>
</div>
</body>
</html>
在上述案例中，通过 transform 的 rotate() 方法将 box02、box03 盒子分别旋转 45。然后，通过 transform-origin 属性来更改 box2 盒子原点坐标的位置。
可以看出，box02、box03 盒子的位置产生了错位。两个盒子的初始位置相同，旋转角度相同，发生错位的原因是transform-origin 属性改变了 box02 盒子的旋转中心点。
9.2.3 3D 转换
在上一节中，我们已经学习了 2D 转换，主要包括如何让元素在平面上进行顺时针或逆时针旋转。其实，在 3D
变形中可以让元素围绕X轴、Y轴、Z轴进行旋转，下面将针对 CSS3 中的 rotateX()、 rotateY() 函数进行具体讲解。
1. rotateX() 方法
rotateX() 函数用于指定元素围绕 X 轴旋转，其基本语法格式如下：
transform: rotateX(a);
在上述语法格式中，参数 a 用于定义旋转的角度值，单位为 deg，其值可以是正数也可以是负数。如果值为正，元素将围绕 X 轴顺时针旋转；反之，如果值为负，元素围绕X轴逆时针旋转。
案例：演示 rotateX() 函数的使用，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>rotateX() 函数</title>
<style type="text/css">
div {
width: 100px;
height: 50px;
background-color: #FF0;
border: 1px solid black;
}
#div2 {
transform: rotate(45deg); /* (1) */
/* 元素围绕 x 轴旋转 */
-ms-transform: rotateX(45deg);
/*IE9浏览器兼容代码*/
-webkit-transform: rotateX(45deg)
/* Safari and Chrome 浏览器兼容代码 */
-moz-transform: rotateX(45deg);
/* Firefox 浏览器兼容代码*/
-o-transform: rotateX(45deg);
/* Opera 浏览器兼容代码*/ /* (2) */
}
</style>
</head>
<body>
<div>元素原来的位置</div>
<div id="div2">元素旋转后的位置</div>
</body>
</html>
元素将围绕X轴顺时针旋转45°，
2. rotateY () 方法
rotateY() 函数指定一个元素围绕 Y 轴旋转，其基本语法格式如下：
transform: rotateY(a);
在上述语法中，参数 a 与 rotateX(a) 中的 a 含义相同，用于定义旋转的角度。如果值为正，元素围绕 Y 轴顺时针旋转；反之，如果值为负，元素围绕 Y 轴逆时针旋转。
案例：在上个案例的基础上演示元素围绕Y轴旋转的效果。将上个案例中的第 (1) ~ (2) 行代码改为：
transform: rotateY(45deg);
/*元素按照Y轴旋转*/
-ms-transform: rotateY(45deg);
/*IE9 浏览器兼容代码*/
-webkit-transform: rotateY(45deg);
/*Safari and Chrome 浏览器兼容代码*/
-moz-transform: rotateY(45deg)
/*Firefox 浏览器兼容代码*/
-o-transform: rotateY(45deg);
/*Opera 浏览器兼容代码*/
- 注意:
_
rotateZ() 函数和 rotateX() 函数、rotateY() 函数功能一样，区别在于 rotateZ() 函数用于指定一个元素围绕乙轴旋转。如果仅从视觉角度上看，rotateZ() 函数让元素顺时针或逆时针旋转，与 rotate() 效果等同，但它不是在 2D 平面上的旋转。
3. rotate3D() 方法
在三维空间里，除了 rotateX()、rotateY() 和 rotateZ() 函数可以让元素在三维空间中旋转之外，还有一个 rotate3D() 函数。在 3D 空间，三个维度也就是三个坐标，即长、宽、高。轴的旋转是围绕一个 [x, y, z] 向量并经过元素原点。 其基本语法如下：
rotate3d(x, Y, Z, angle);
在上述语法格式中，各参数属性值的取值说明如下：
-
x：代表横向坐标位移向量的长度。
-
y：代表纵向坐标位移向量的长度。
-
z：代表 Z 轴位移向量的长度。此值不能是一个百分比值，否则将会视为无效值。
-
angle：角度值，主要用来指定元素在 3D 空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转。
需要说明的是，在 CSS3 中包含很多转换的属性，通过这些属性可以设置不同的转换效果。
转换的属性
| 属性名称 | 描述 |
|---|---|
| transform | 向元素应用 2D 或 3D 转换 |
| transform-origin | 允许改变被转换元素的位置 |
| transform-style | 规定被嵌套元素如何在3D空间中显示 |
| perspective | 规定 3D 元素的透视效果 |
| perspective-origin | 规定 3D 元素的底部位置 |
| backface-visibility | 定义元素在不面对屏幕时是否可见 |
再探究
转换的方法
| 方法名称 | 描述 |
|---|---|
| matrix3d(n,n,n,n, n,n,n,n, n,n,n,n, n,n,n,n) | 定义 3D 转换，使用16个值的4×4矩阵 |
| translate3d(x,y,z) | 定义 3D 转换 |
| translateX(x) | 定义 3D 转换，仅使用用于X轴的值 |
| translateY(y) | 定义 3D 转换，仅使用用于Y轴的值 |
| ranslateZ(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 旋转 |
| perspective(n) | 定义 3D 转换元素的透视视图 |
案例：演示转换的属性和方法的使用，
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>translate3D() 方法</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
margin: 50px auto;
border: 5px solid #000;
position: relative;
perspective: 50000px;
/*规定 3D 元素的透视效果*/
-ms-perspective: 50000px;
/* IE9 浏览器兼容代码*/
-webkit-perspective: 50000px;
/*Safari and Chrome 浏览器兼容代码*/
-moz-perspective: 50000px;
/* Firefox 浏览器兼容代码*/
-o-perspective: 50000px;
/*Opera 浏览器兼容代码*/
transform-style: preserve-3d;
/*规定被嵌套元素如何在3D空间中显示*/
-ms-transform-style: preserve-3d;
/*IE9浏览器兼容代码*/
-webkit-transform-style: preserve-3d;
/*Safari and Chrome 器兼容代码*/
-moz-transform-style: preserve-3d;
/*Firefox浏览器兼容代码*/
-o-transform-style: preserve-3d;
/*Opera浏览器兼容代码*/
transition: all is ease 0s;
/*设置过渡效果*/
-webkit-transition: all 1s ease 0s;
/*Safari and Chrome 浏览器兼容代码*/
-moz-transition: all 1s ease 0s;
/*Firefox 浏览器兼容代码*/
-o-transition: all 1s ease 0s;
/*Opera浏览器兼容代码*/
div:hover {
transform: rotateX(-90deg);
/*设置旋转角度*/
-ms-transform: rotateX(-90deg);
/*IE9 浏览器兼容代码*/
-webkit-transform: rotateX(-90deg);
/*Safari and Chrome 浏览器兼容代码*/
-moz-transform: rotatex(-90deg);
/*Firefox 浏览器兼容代码*/
-o-transform: rotateX(-90deg);
/*Opera浏览器兼容代码*/
}
div img {
position: absolute;
top: 0;
left: 0;
}
div img.nol {
transform: translateZ(100px);
/*设置旋转轴*/
-ms-transform: rotateZ(100px);
/*IE9浏览器兼容代码*/
-webkit-transform: rotateZ(100px);
/*Safari and Chrome浏览器兼容代码*/
-moz-transform: rotateZ(100px);
/*Firefox浏览器兼容代码*/
-o-transform: rotateZ(100px);
/*Opera浏览器兼容代码*/
z-index: 2;
}
div img.no2 {
transform: rotateX(90deg) translateZ(100px);
/*设置旋转轴和旋转角度*/
-ms-transform: rotateX(90deg) translateZ(100px);
/*IE9 浏览器兼容代码*/
-webkit-transform: rotateX(90deg) translate2(100px); /*Safari and Chrome 浏览器兼容代码*/
-moz-transform: rotateX(90deg) translateZ(100px); /*Firefox 浏览器兼容代码*/
-o-transform: rotateX(90deg) translate(100px);
/*Opera 浏览器兼容代码*/
}
</style>
</head>
<body>
<div>
<img class="nol" src="#" alt="1">
<img class="no2" src="#" alt="2">
</div>
</body>
</html>
在上述案例中，通过 perspective 属性规定 3D 元素的透视效果，transform-style 属性规定元素在 3D 空间中的显示方式，并且分别针对 < div> 和 < img> 设置不同的旋转轴旋转角度。
鼠标移上时，< div> 将沿着 X 轴逆时针旋转90°，
9.3 动画 ( animation 属性 )
CSS3 除了支持渐变、过渡和转换特效外，还可以实现强大的动画效果。在 CSS3 中，使用 animation 属性可以定义复杂的动画。
本节将对动画中的 @keyframes 关键帧以及 animation 相关属性进行详细讲解。
9.3.1 @keyframes
使用动画之前必须先定义关键帧，一个关键帧表示动画过程中的一个状态。在 CSS3 中，@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐变为新样式的动画效果。@keyframes 属性的语法格式如下：
@keyframes animationname {
keyframes-selector {
css-styles;
}
}
在上面的语法格式中，@keyframes 属性包含的参数具体含义如下：
-
animationname：表示当前动画的名称，它将作为引用时的唯一标识， 因此不能为空。
-
keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、form 或者 to 。其中，form 和 0% 效果相同表示动画的开始，to 和 100% 效果相同表示动画的结束。
-
css-styles：定义执行到当前关键顿时对应的动画状态，由 CSS 样式属性进行定义，多个属性之间用分号分隔，不能为空。
案例：使用 @keyframes， 属性可以定义一个淡入动画，示例代码如下：
@keyframes 'apper'{
0% {
opacity: 0;
} /* 动画开始时的状态，完全透明 */
100% {
opacity: 1;
} /* 动画结束时的状态，完全不透明 */
}
上述代码创建了一个名为 apper 的动画，该动画在开始时 opacity 为 0 (透明)，动画结束时 opacity 为 1 (不透明)。该动画效果还可以使用等效代码来实现，具体如下：
@keyframes 'apper'{
from {
opacity: 0;
} /* 动画开始时的状态，完全透明 */
to {
opacity: 1;
} /* 动画结束时的状态，完全不透明 */
}
另外，如果需要创建一个淡入谈出的动画效果，可以通过如下代码实现，具体如下：
@keyframes 'appeardisappear'{
from, to {
opacity: 0;
} /* 动画开始和结束时的状态，完全透明 */
20%, 80% {
opacity: 1;
} /* 动画的中间状态，完全不透明 */
}
在上述代码中，为了实现淡入淡出的效果，需要定义动画开始和结束时元素不可见，然后渐渐谈出，在动画的 20% 处变得可见，然后动画效果持续到 80% 处，再慢慢淡出。
- 注意:
Intemet Explorer9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
9.3.2 animation-name 属性
animaion-name 属性于定义要应用的动画名称，为 @keyframes 动画规定名称。其基本语法格式如下：
animation-name: keyframename | none;
在上述语法中，animation-name 属性初始值为 none，适用于所有块元素和行内元素。keyframename 参数用于规定需要绑定到选择器的 keyframe 的名称，如果值为 none，则表示不应用任何动画，通常用于覆盖或者取消动画。
9.3.3 animation-duration 属性
animation-duration 属性用于定义整个动画效果完成所需要的时间，以秒或毫秒计，其基本语法格式如下：
animation-duration: time;
在上述语法中，animation-duration 属性初始值为0，适用于所有块元素和行内元素。time 元素是以秒 (s) 或者毫秒 (ms) 为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。
案例：演示 animation-name 及 animation-duration 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>animation-name 及 animation-duration 属性</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: mymove;
/* 定义动画名称 */
animation-duration: 5s;
/* 定义动画时间 */
-webkit-animation-name: mymove;
/* Safari and Chrome浏览器兼容代码 */
-webkit-animation-duration: 5s;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
@-webkit-keyframes mymove {
from {
left: 0px;
} /* 动画开始时的状态 */
to {
left: 200px;
} /* 动画结束时的状态 */
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
很快就会开始自动右移，
最后位置，
在上述案例中，分别使用 animation-name 属性定义要应用的动画名称，使用 animation-duration 属性定义整个动画效果完成所需要的时间。另外，使用 form 和 to 函数指定当前关键帧要应用动画过程中的位置。
动画开始时，首先，元素以低速开始，然后加快向右移动，当接近距离左边 200 像素的位置时速度减慢，直至移动到最右端，
9.3.4 animation-timing-function 属性
animation-timing-function 用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。animation-timing-function 属性的语法格式为:
animation-timing-function: value;
在上述语法中，animation-timing-function 的默认属性值为 ease，适用于所有的块元素和行内元素。另外，animation-timing-function 还包括 linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值，
animation-timing-function 的常用属性值
| 属性值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度是相同的 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| cubic-bezier(n, n, n, n) | 在cubic-bezier 函数中自己的值。可能的值是从0到1的数值 |
案例：在上个案例的基础上进行演示 animation-timing-function 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>animation-timing-function 属性</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: mymove;
/* 定义动画名称 */
animation-duration: 5s;
/* 定义动画时间 */
animation-timing-function: linear;
/*定义动画速度曲线*/
/*Safari and Chrome 浏览器兼容代码*/
-webkit-animation-name: mymove;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
@-webkit-keyframes mymove {
/*Safari and Chrome浏览器兼容代码*/
from {
left: 0px;
} /* 动画开始时的状态 */
to {
left: 200px;
} /* 动画结束时的状态 */
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在上述案例中，分别使用 animation-name 属性定义要应用的动画名称，使用 animation-duration 属性定义整个动画效果需要 5 秒时间， 使用 animation-timing-function 属性规定动画从头到尾速度相同。
9.3.5 animation-delay 属性
animation-delay 属性用于定义执行动画效果之前延迟的时间，即规定动画什么时候开始。其基本语法格式为：
animation-delay: time;
在上述语法中，参数 time 用于定义动画开始前等待的时间，其单位是 s 或者 ms，默认属性值为 0。animation-delay 属性适用于所有的块元素和行内元素。
案例：在上个案例的基础上进行演示 animation-delay 属性的使用，在 CSS 中添加如下代码：
animation-delay: 2s;
-webkit-animation-delay: 2s;
动画开始前将会延迟 2s 的时间，然后才开始执行动画。
9.3.6 animation-iteration-count 属性
animation-iteration-count 属性用于定义动画的播放次数，其基本语法如下：
animation-iteration-count: number|infinite;
在上述语法格式中，animation-iteration-count 属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是 infinite，则指定动画循环播放。
案例：继续在上个案例的基础上进行演示，在 CSS 中添加如下代码：
animation-iteration-count: 3;
-webkit-animation-iteration-count: 3;
在上面的代码中，使用 animation-iteration-count 属性定义动画效果需要播放 3 次。此时，刷新页面，动画效果将连续播放三次后停止。
9.3.7 animation-direction 属性
animation-direcion 属性定义当前动画播放的方向，即动画播放完成后是否逆向交替循环。其基本语法如下：
animation-direction: normal | alternate;
在上述语法格式中，animation-direction 属性初始值为 normal ，适用于所有的块元素和行内元素。该属性包括两个值，默认值 normal 表示动画每次都会正常显示。如果属性值是 " alternate " ，则动画会在奇数次数 (1、3、5等) 正常播放，而在偶数次数 (2、4、6等) 逆向播放。
案例：演示 animation-direction 属性的用法，
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>animation-direction 属性</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: mymove;
/*定义动画名称*/ (1)
animation-duration: 5s;
/*定义动画时间*/
animation-timing-function: linear;
/*定义动画速度曲线*/
animation-delay: 2s;
/*定义动延迟时间*/
animation-iteration-count: 3;
/*定义动画的播放次数*/
animation-direction: alternate;
/*定义动画播放的方向*/ (2)
/* Safari and Chrome 浏览器兼容代码 */
-webkit-animation-name: mymove;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 3;
-webkit-animation-direction: alternate;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
@-webkit-keyframes mymove {
/* Safari and Chrome浏览器兼容代码 */
from {
left: 0px;
} /* 动画开始时的状态 */
to {
left: 200px;
} /* 动画结束时的状态 */
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
设置 animation-direction 属性的值是 " alternate "，则动画会在奇数次数正常播放，而在偶数次数逆向播放。
9.3.8 animation 属性
与 transition 属性一样，animation 属性也是一个简写属性，用于在一个属性中设置 animation-name、animation-duration、animation-timing-function、animation-delay、 animation-iteration-count 和 animation-direction 六个属性值。 其基本语法格式如下：
animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
在上述语法中，使用 animation 属性时必须指定 animation-name 和 animation-duration 属性，否则持续的时间为0，并且永远不会播放动画。
使用 animation 属性可以将上个案例中的第(1) ~ (2) 行代码进行简写，具体如下：
animation: mymove 5s linear 2s 3 alternate;
总会遇到你的伯乐的
阿ken的HTML、CSS的学习笔记_HTML基础（笔记一）
阿ken的HTML、CSS的学习笔记_HTML 页面元素和属性（笔记二）
阿ken的HTML、CSS的学习笔记_文本样式属性（笔记三）
系统整理最全HTML、CSS_文本样式属性（笔记三）
阿ken的HTML、CSS的学习笔记_CSS3选择器（笔记四）
阿ken的HTML、CSS的学习笔记_CSS盒子模型（笔记五）
阿ken的HTML、CSS的学习笔记_浮动与定位（笔记六）
阿ken的HTML、CSS的学习笔记_表单的应用（笔记七）
阿ken的HTML、CSS的学习笔记_多媒体技术（笔记八）
_
拜拜
多谢拜访
我是阿ken
470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
