CSS3

使用鼠标滚轮进行切换

1. CSS3 边框属性
2. CSS3 文本效果
3. CSS3 2D转换
4. CSS3 3D转换
5. CSS3 过渡
6. CSS3 动画

一、边框属性

1.border-radius

border-radius: 圆角边框，圆

*语法：border-radius: length | %

圆角边框

圆

半圆

2.box-shadow

box-shadow: 阴影

*语法：box-shadow: h-shadow v-shadow blur spread color inset

水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的尺寸, 阴影的颜色, 将外部阴影 (outset) 改为内部阴影

二、文本效果

1.text-shadow

text-shadow: 文本阴影

*text-shadow: h-shadow v-shadow blur color

水平阴影、垂直阴影、模糊距离，以及阴影的颜色

文本阴影效果

2.word-wrap

word-wrap: 自动换行

*语法： word-warp: normal | break-word

Honorificabilitudinitatibus, in Latin

三、2D转换

1.transform

实现元素的位移、旋转、变形、缩放

移动 translate(x, y) 可以改变元素的位置，x、y可为负值；
缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数，不可为负值；
旋转 rotate(deg) 可以对元素进行旋转，正值为顺时针，负值为逆时针；
倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜

2.transform: translate(x, y)

移动 translateX(n) 沿着X轴移动；
移动 translateY(n) 沿着Y轴移动；
移动 translate(x,y) 沿着X,Y轴移动；

3.transform: scale(x, y)

缩放 scaleX(n) 改变元素的宽度；
缩放 scaleY(n) 改变元素的高度；
缩放 scale(x,y) 改变元素的高度和宽度；

4.transform: rotate(deg)

*旋转只是在平面内旋转，没有X,Y轴概念，在3D转换中才有X,Y,Z轴，正值为顺时针，负值为逆时针。

旋转

5.transform: skew(deg, deg)

倾斜 skewX(deg) 定义2D倾斜转换，沿着X轴；
倾斜 skewY(deg) 定义2D倾斜转换，沿着Y轴；
倾斜 skew(deg, deg) 定义2D倾斜转换，沿着X,Y轴；

Y轴倾斜

X轴倾斜

X,Y轴

四、3D转换

1.3D坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直

2.transform: translate

translate3d(x,y,z) 定义3D转化；
translateZ(z) 仅使用于Z轴的值；

translate3d

3.transform: scale

scale3d(n,n,n) 定义3D缩放；
scaleZ(n) 给定Z轴值；

scale3d(n,n,n)

4.transform: rotate

rotateX(x) 定义沿着X轴旋转；
rotateY(y) 定义沿着Y轴旋转；
rotateZ(z) 定义沿着Z轴旋转；
rotate3d(x,y,z,angle) 定义3D旋转；

x 类型，表示旋转轴X坐标方向的矢量。y 类型，表示旋转轴Y坐标方向的矢量。z 类型，表示旋转轴Z坐标方向的矢量。a 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

X轴旋转

Y轴旋转

Z轴旋转

X,Y,Z

五、过渡

1. transition

可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

transition用于在一个属性中设置四个过渡属性
transition-property规定应用过渡的 CSS 属性的名称
transition-duration定义过渡效果花费的时间
transition-timing-function规定过渡效果的时间曲线
transition-delay规定过渡效果何时开始

六、动画

1. @keyframes

在 CSS3 中创建动画，必须要知道 @keyframes 规则，@keyframes 规则用于创建动画，通常使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

@keyframes changeBg {
from {background:red;}
to {background:yellow;}
}

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。必须要规定动画的名称，动画的时长

2. animation

@keyframes 规定动画；
animation 所有动画属性的简写属性，除了 animation-play-state 属性；
animation-name 规定 @keyframes 动画的名称；
animation-duration 规定动画完成一个周期所花费的秒或毫秒（0）；
animation-timing-function 规定动画的速度曲线（ease）；
animation-delay 规定动画何时开始（0）；
animation-iteration-count 规定动画被播放的次数（1）；
animation-direction 规定动画是否在下一周期逆向地播放（normal）；
animation-play-state 规定动画是否正在运行或暂停（running）；
animation-fill-mode 规定对象动画时间之外的状态。

3. 案例

animation

thanks

一、边框属性

1.border-radius

border-radius: 圆角边框，圆

*语法：border-radius: length | %

2.box-shadow

box-shadow: 阴影

*语法：box-shadow: h-shadow v-shadow blur spread color inset

水平阴影的位置, 垂直阴影的位置, 模糊距离, 阴影的尺寸, 阴影的颜色, 将外部阴影 (outset) 改为内部阴影

二、文本效果

1.text-shadow

text-shadow: 文本阴影

*text-shadow: h-shadow v-shadow blur color

水平阴影、垂直阴影、模糊距离，以及阴影的颜色

2.word-wrap

word-wrap: 自动换行

*语法： word-warp: normal | break-word

三、2D转换

1.transform

实现元素的位移、旋转、变形、缩放

2.transform: translate(x, y)

3.transform: scale(x, y)

4.transform: rotate(deg)

*旋转只是在平面内旋转，没有X,Y轴概念，在3D转换中才有X,Y,Z轴，正值为顺时针，负值为逆时针。

5.transform: skew(deg, deg)

四、3D转换

1.3D坐标轴

用X、Y、Z分别表示空间的3个维度，三条轴互相垂直

2.transform: translate

3.transform: scale

4.transform: rotate

x 类型， 表示旋转轴X坐标方向的矢量。y 类型， 表示旋转轴Y坐标方向的矢量。z 类型， 表示旋转轴Z坐标方向的矢量。a 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

五、过渡

1. transition

可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

六、动画

1. @keyframes

在 CSS3 中创建动画，必须要知道 @keyframes 规则，@keyframes 规则用于创建动画，通常使用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%

在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。必须要规定动画的名称，动画的时长

2. animation

3. 案例

x 类型，表示旋转轴X坐标方向的矢量。y 类型，表示旋转轴Y坐标方向的矢量。z 类型，表示旋转轴Z坐标方向的矢量。a 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。