浅谈：CSS3的渐变以及2D转换

1. CSS3渐变

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同

1.1 线性渐变

• 语法：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

注意：

• direction：默认为to bottom，也就是从上向下的渐变；
• stop：指的是颜色的分布位置，默认为均匀分布，如果有3个颜色，那么各个颜色的stop均为33.33%。

角度	英文	作用
0deg	to top	从下到上
90deg	to right	从左到右
180deg	to bottom	从上到下
270deg	to left	从右到左
	to top left	有下角到左上角
	totopright	左下角到右上角

1.2 径向渐变

• 语法：

background: radial-gradient(center, shape, size, start-color, ..., last-color);

注意：

• center：渐变起点的位置，可以为百分比，默认是图形的正中心。
• shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
• size：渐变的大小，即渐变到哪里停止，它有四个值。
• closest-side：最近边； farthest-side：最远边；closest-corner：最近角； farthest-corner：最远角。

1.3 重复线性渐变

• repeating-linear-gradient() 函数用于重复线性渐变
• 语法：

background: repeating-linear-gradient(red, red 10%, balck 20%);

注意： 10%的位置为red，20%的位置为black，然后按照这20%向下重复

1.4 重复径向渐变

• repeating-radial-gradient() 函数用于重复线性渐变
• 语法：

background: repeating-radial-gradient(red, red 10%, black 20%);

2. CSS3的2D转换

2.1 transform

• rotate(): 旋转函数（取值度数）
  • Transform-origin:旋转的基点
• skew(): 倾斜函数（取值度数 (扭曲)）
  • skewX() skewY()
• scale() :缩放函数 （取值 正数、负数和小数）
  • scaleX()scaleY()
• translate() :位移函数
  • translateX()translateY()

2.2 rotate() 方法

• 单位：deg
• 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
• 例如：值 rotate(30deg) 就是把元素顺时针旋转 30 度

2.3 skew() 方法

• 通过 skew() 方法，元素翻转（倾斜/扭曲）给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
• 例：值 skew(30deg,20deg) 就是围绕 X 轴把元素翻转（倾斜/扭曲） 30 度，围绕 Y 轴翻转（倾斜/扭曲） 20 度。

2.4 scale() 方法

• 通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
• 例：值 scale(2,4) 就是把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

2.5 translate() 方法

• 通过 translate() 方法，元素从其当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标） 位置参数
• 例：值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

3. CSS3过渡

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

• Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
• Safari 需要前缀 -webkit-。
• 注：Internet Explorer 9 以及更早的版本，不支持 transition 属性；Chrome 25 以及更早的版本，需要前缀 -webkit-。

3.1 transition

• transition-property 要运动的样式 （all || [attr] || none）
• transition-duration 运动时间
• transition-delay 延迟时间
• transition-timing-function 运动形式
  • ease：（逐渐变慢）默认值
  • linear：（匀速）
  • ease-in：(加速)
  • ease-out：（减速）
  • ease-in-out：（先加速后减速）

3.2 pointer-events

pointer-events直译为指针事件

pointer-events：auto/none 

设置为none后，有如下相关特性:

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的hover和active状态的变化触发事件
• 阻止JavaScript点击动作触发的事件

3.3 backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见

backface-visibility: visible|hidden;
// visible 背面是可见的
// hidden 背面是不可见的

---