CSS3渐变

• 渐变是两种或多种颜色之间的过度。
• CSS3中增加了渐变属性，可以轻松实现渐变效果。
• 最早支持CSS3渐变的是Webkit内核的浏览器，随后Firefox和Opera等浏览器也相应给予支持，但各浏览器的语法格式不同，显示效果也不同。

1. CSS3线性渐变

线性渐变的过程中颜色沿着一条直线过度：从左到右，从右到左，从顶部到底部，从底部到顶部或者沿着任意轴。
语法：

background: linear-gradient(渐变角度, 颜色值1, 颜色值2, …, 颜色值n);

渐变角度：
表示渐变的起始和终止位置，可以用以deg（度）为单位的角度值表示，也可以用关键值表示：
totop，对应0deg
toright，对应90deg
tobottom，对应180deg
toleft ，对应270deg
left bottom，左下角
left top，左上角
颜色值1：
颜色值1是起点的颜色，颜色值n是终点的颜色，在它们之间的颜色值表示多种颜色的渐变

2. CSS3径向渐变

径向渐变又称为圆形或椭圆渐变，颜色不是沿着一条直线轴变化，而是从一个中心点向四周进行扩张渐变。
语法：

background: radial-gradient(渐变形状  圆心位置, 颜色值1, 颜色值2, …, 颜色值n);

渐变形状： 用来定义径向渐变形状，取值： circle：圆形渐变
ellipse：椭圆形渐变
圆心位置： 用来定义径向渐变的中心点坐标，使用“at”加上关键词或参数值来定义径向渐变的中心位置。若省略则默认值为center。取值可以是：像素、百分比，left / center / right / top / bottom等。 颜色值1：
颜色值1是起点的颜色，颜色值n是终点的颜色，在它们之间的颜色值表示多种颜色的渐变

3. CSS3重复渐变

重复渐变：重复的渐变模式，包括重复线性渐变和重复经向渐变。
语法：

background: repeating-linear-gradient(渐变角度, 颜色值1, 颜色值2, …, 颜色值n);
background: repeating-radial-gradient(渐变形状  圆心位置, 颜色值1, 颜色值2, …, 颜色值n);

CSS3变形

• CSS3变形是一系列效果的集合，如平移、旋转、缩放、倾斜等。
• 2012年9月，W3C组织发布了CSS3变形工作草案，包括CSS3 2D变形和3D变形。

1. transform属性

作用：让元素在一个坐标性中变形，包括一系列的变形函数，可以实现元素移动、旋转、缩放等效果。
语法：

transform: none | <transform-function> [<transform-function>]*

transform：适用于内联元素和块元素，默认值为none，表示不变形
transform-function：用于设置变形函数，可以是一个或多个变形函数的列表，中间以空格间隔。

transform常用的2D变形函数功能：

函数	功能描述
translate()	移动元素，根据X轴和Y轴坐标重新定位元素位置，扩展函数translateX()和translateY()
scale()	缩放元素使元素尺寸发生变化，扩展函数scaleX()和scaleY()
rotate()	旋转元素，扩展函数rotateX()和rotateY()
skew()	使元素倾斜，扩展函数skewX()和skewY()

transform常用的3D变形函数功能：

函数	功能描述
translate3d()	移动元素，指定3D变形移动位移量
translateZ()	指定3D位移在Z轴上的位移量
scale3d()	缩放元素
scaleZ()	指定Z轴上的缩放量
rotate3d()	指定元素具有一个3D旋转的角度
rotateZ()	指定元素沿Z轴旋转的角度

2. transform-origin属性

作用：用来指定元素中心点位置，默认情况下，变形的原点在元素中心点。
语法：

transform-origin: x-offset | x-offset-keyword  y-offset | y-offset-keyword

• x-offset：百分比、em、px等具体值
• x-offset-keyword：top、right、bottom、left和center等关键词 2D变形中该属性若提供一个属性值，该值表示横坐标，纵坐标默认为50%，若提供两个属性值，分别表示横纵坐标。
  3D变形中该属性还包括了Z轴的第3个值。