从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

线性渐变 - 从左到右

从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

线性渐变 - 对角

从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：

注意： Internet Explorer 9 及之前的版本不支持渐变。

使用角度

如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，

而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。

语法

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

角度是指水平线和渐变线之间的角度，逆时针方向计算。

换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

但是，请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准，

即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。

换算公式 90 - x = y 其中 x 为标准角度，y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度：

线性渐变 - 使用不同的角度

0deg

90deg

180deg

-90deg

注意： Internet Explorer 9 及之前的版本不支持渐变。

使用多个颜色结点

下面的实例演示了如何设置多个颜色结点：

3 个颜色结点（均匀分布）

7 个颜色结点（均匀分布）

3 个颜色结点（不均匀分布）

注意： 当未指定百分比时，颜色结点不会自动均匀分布。

注意： Internet Explorer 9 及之前的版本不支持渐变。

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变：

渐变背景

注意： Internet Explorer 9 及之前的版本不支持渐变。

使用透明度（Transparency）

CSS3 渐变也支持透明度（transparency），可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。

rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：

0 表示完全透明，1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明，慢慢过渡到完全不透明的红色：

线性渐变 - 透明度

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

注意： Internet Explorer 9 及之前的版本不支持渐变。

重复的线性渐变

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

重复的线性渐变

注意： Internet Explorer 9 及之前的版本不支持渐变。

1.2 CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），

渐变的大小是 farthest-corner（表示到最远的角落）。

径向渐变的实例：

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

径向渐变 - 颜色结点均匀分布（默认情况下）

径向渐变 - 颜色结点均匀分布

注意： Internet Explorer 9 及之前的版本不支持渐变。

径向渐变 - 颜色结点不均匀分布

径向渐变 - 颜色结点不均匀分布

注意： Internet Explorer 9 及之前的版本不支持渐变。

设置形状

shape 参数定义了形状。

它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。

默认值是 ellipse。

径向渐变 - 形状

椭圆形 Ellipse（默认）：

圆形 Circle：

注意： Internet Explorer 9 及之前的版本不支持渐变。

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值：

径向渐变 - 不同尺寸大小关键字的使用

closest-side：

farthest-side：

closest-corner：

farthest-corner（默认）：

注意： Internet Explorer 9 及之前的版本不支持渐变。

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

重复的径向渐变

注意： Internet Explorer 9 及之前的版本不支持渐变。

2. 倒影

倒影的特点：

    例如：场景一个p标签里面嵌套一个img标签；
    设置img图片标签的属性

    img{
        width: 100px;
    }
    设置p标签的属性
    p{

    
    float: left;
         
    -webkit-box-reflect:left 0px -webkit-linear-gradient(left,rgba(0,0,0,.2) 30%,rgba(0,0,0,.6) 90%);

    }

显示效果如下图所示：

3. 过渡

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

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

应用于宽度属性的过渡效果，时长为 2 秒：

p
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：

规定当鼠标指针悬浮(:hover)于

元素上时：

样例代码：

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 p 元素上，查看过渡效果。

多项改变

要添加多个样式的变换效果，添加的属性由逗号分隔：

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 p 元素上，查看过渡效果。

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 p 元素上，查看过渡效果。

注意： 过渡效果需要等待两秒后才开始。

与上面的例子相同的过渡效果，但是使用了简写的 transition 属性：

注意：该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。

鼠标移动到 p 元素上，查看过渡效果。

注意： 过渡效果需要等待两秒后才开始。

    例如：一个p标签嵌套了一个img标签和span标签（img和span是同级标签）
    
    img{
       height: 218px;
      }
      
    span{
        height: 30px;
        width: 100%;
        font-size: 16px;
        color: white;
        text-align: center;;
        line-height: 30px;
        position: absolute;
        left: 0;
        bottom: 0;
        
        opacity: 0;
        
        transition:all .5s;
      }
      hover 伪类选择器用于选择鼠标指针浮动在上面的元素时触发；对于此时而言，就是鼠标指针浮动在p标签上时，显示span标签上的字体；
    p:hover span{
       
       opacity: 1;
      }

显示效果如下图所示：

扩展属性：

4.CSS3变形

4.1 2D 转换

主要使用下面五个方法：

新转换属性

以下列出了所有的转换属性:

2D 转换方法

4.1.1 translate() 方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

Hello. This is a DIV element.

Hello. This is a DIV element.

4.1.2 rotate() 方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

你好。这是一个 DIV 元素。

你好。这是一个 DIV 元素。

4.1.3 scale() 方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：

scale（2,4）转变宽度为原来的大小的2倍，和其原始大小4倍的高度。

Hello. This is a DIV element.

Hello. This is a DIV element.

4.1.4 skew() 方法

skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。

Hello. This is a DIV element.

Hello. This is a DIV element.

4.1.5 matrix() 方法

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

Hello. This is a DIV element.

Hello. This is a DIV element.

4.1.6 CSS3 transform 属性

Transform属性应用于元素的2D或3D转换。

这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform: none|transform-functions;

Hello

案例：旋转图片

The pulpit rock in Lysefjorden, Norway.

Monterosso al Mare. One of the five villages in Cinque Terre.

4.1.7 CSS3 transform-origin 属性

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素，还可以更改元素的Z轴。

为了更好地理解Transform-Origin属性，请查看这个演示.

注意： 使用此属性必须先使用 transform 属性。

transform-origin: x-axis y-axis z-axis;

HELLO

4.1.8 transition补充

transition当中也可以使用贝塞尔曲线。

例如：transition: all 1s cubic-bezier(0,0,0.8,1.8);

如下图所示：

ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

首先，我们来学习几个3D变形当中的几个属性知识点；学习3D效果之前，我们来看一张三维空间图片，这是一张三维空间的基本图，分别有x轴、y轴、z轴三个方向；

3D平移 translate

3D平移分别有三个方向：

第一个方向：translateX(x) 定义 3D 转化，仅使用用于 X 轴的值，以X轴平移；

看下代码中所示，例如我们创建了一个p标签（我们在p上添加一行字，叫做”我是文字”，方便待会儿查看角度），然后设置其属性为：

然后，我们来看一下3D平移，该场景下的运行效果(注意：主要看下鼠标滑到p上时的一个平移效果);

第二个方向：translateX(Y) 定义 3D 转化，仅使用用于 Y 轴的值，以Y轴平移；这个和以X轴方向差不多，也就是上下平移，如果平移的负值，则往Y轴的负方向，也就是往下平移，反之，向上平移（这个地方就不做图解演示说明）；

第三个方向：translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值，以Z轴平移；对于这个角度的值，就得有三维空间的想象力了，那么，往Z周的正方向来平移，也就是相当于与我们眼睛目视前方的距离越来越近；做个实例，我们来看一下；
我们还是使用上面这个已经创建好的p标签，稍作修改，看下效果；

注意：在使用translateZ平移时，一定要定义一个透视点作为参照物以及开启3D视图；

同样，我们来看一下3D平移，该场景下的运行效果(注意：主要看下鼠标滑到p上时的一个距离我们越来越近的平移效果 Z轴正方向);

3D旋转 rotate

rotateX(angle) 定义沿 X 轴的 3D 旋转。

同样，我们还是以上面这个p为例，只需要将里面的transform部分修改为rotateX，沿X轴旋转；(只看修改代码的部分)

我们来看下沿X轴旋转的效果；

rotateZ(angle) 定义沿 Z 轴的 3D 旋转。（这个只需要将上面代码中的rotateY修改为rotateZ即可，我们看下沿Z轴旋转的效果）注意：Z轴的空间是哪个角度；

4.2 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

转换属性

下表列出了所有的转换属性：

3D 转换方法

4.2.1 rotateX() 方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

Note: Internet Explorer 9 (and earlier versions) and Opera does not support the rotateX method.

Hello. This is a DIV element.

Hello. This is a DIV element.

4.2.2 rotateY() 方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

Note: Internet Explorer 9 (and earlier versions) and Opera does not support the rotateY method.

Hello. This is a DIV element.

Hello. This is a DIV element.