css3渐变及2D

径向渐变

径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变

语法：

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：多颜色节点均匀分布

div {background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); } 
div {background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }

• 示例 2：多颜色节点均匀分布

div {background: radial-gradient(circle, red, yellow, green); } 
div {background: radial-gradient(ellipse, red, yellow, green); }

• 示例 3：设置渐变形状

circle：渐变为最大的圆形；ellipse：根据元素形状渐变，元素为正方形是显示效果与 circle 无异

• 示例 4：不同尺寸的渐变

div {background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); } 
div {background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div {background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div {background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black);}

重复性渐变

1. 重复性线性渐变

div {background: repeating-linear-gradient(red, yellow 10%, green 20%); }

2. 重复性径向渐变

div {background: repeating-radial-gradient(red, yellow 10%, green 20%); }

过渡

css3 的 transition 允许 css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变 CSS 的属性值

1. transition-property：检索或设置对象中的参与过渡的属性
2. transition-duration：检索或设置对象过渡的持续时间
3. transition-delay：检索或设置对象延迟过渡的时间
4. transition-timing-function：检索或设置对象中过渡的动画类型

 检索或设置对象中过渡的动画类型
http://cubic-bezier.com/

简写 ：transition:all/ 具体属性值 运动时间 s /ms 延迟时间 s /ms 动画类型

案例

变形属性：transform

transform 翻译成汉语具有 ” 变换 ” 或者 ” 改变 ” 的意思。

通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果

最能体现 transform 属性强大实力的是实现元素的 3D 变换效果。

2D

2D 变换，是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸.

对上面坐标系简单分析如下：

（1）. 默认状态下，x 轴是水平的，向右为正。

（2）. 默认状态下，y 轴是垂直的，向下为正，这与传统的数学坐标系不同。

2D 功能函数

2D 位移 translate()

• 将元素向指定的方向移动，类似于 position 中的 relative。
• 水平移动：向右移动 translate(tx,0) 和向左移动 translate(-tx,0)；
• 垂直移动：向上移动 translate(0,-ty) 和向下移动 translate(0,ty);
• 对角移动：右下角移动 translate(tx,ty)、右上角移动 translate(tx,-ty)、左上角移动 translate(-tx,-ty) 和左下角移动 translate(-tx,ty)。

2D 缩放 scale()

• 让元素根据中心原点对对象进行缩放。默认的值 1。因此 0.01 到 0.99 之间的任何值，使一个元素缩小；而任何大于或等于 1.01 的值，让元素显得更大。
• 缩放 scale() 函数和 translate() 函数的语法非常相似，他可以接受一个值，也可以同时接受两个值，如果只有一个值时，其第二个值默认与第一个值相等。例如，scale(1,1) 元素不会有任何变化，而 scale(2,2) 让元素沿 X 轴和 Y 轴放大两倍。
• scaleX()：相当于 scale(sx,1)。表示元素只在 X 轴（水平方向）缩放元素，其默认值是 1。
• scaleY()：相当于 scale(1,sy)。表示元素只在 Y 轴（纵横方向）缩放元素，其默认值是1。

3、rotate()

旋转 rotate() 函数通过指定的角度参数对元素根据对象原点指定一个 2D 旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。

rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转

4、skew()

倾斜 skew() 函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着 X 轴和 Y 轴按照一定的角度倾斜。

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

变形原点