CSS3渐变_倒影_过渡_2D变形_3D变形__第十天

作者: MR_LIXP | 来源:发表于2016-03-16 22:09 被阅读962次

请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。

如果您觉得这篇文章还不错，可以去H5专题中查看更多相关文章。

CSS3高级属性

这里写图片描述

今日课程预览

这里写图片描述

1. 渐变

1.1 线性渐变

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

同时，你也可以设置一个起点和一个方向（或一个角度）。

语法：

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

线性渐变 - 从上到下（默认情况下）

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 从上到下</h3>
    <p>从顶部开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

线性渐变 - 从左到右

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 从左到右</h3>
    <p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

线性渐变 - 对角

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 对角</h3>
    <p>从左上角开始（到右下角）的线性渐变。起点是红色，慢慢过渡到蓝色：</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

使用角度

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

而不用预定义方向（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为非标准角度。

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 100px;
        background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */
    }
    
    #grad2 {
        height: 100px;
        background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
    }
    
    #grad3 {
        height: 100px;
        background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
    }
    
    #grad4 {
        height: 100px;
        background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 使用不同的角度</h3>
    <div id="grad1" style="color:white;text-align:center;">0deg</div><br>
    <div id="grad2" style="color:white;text-align:center;">90deg</div><br>
    <div id="grad3" style="color:white;text-align:center;">180deg</div><br>
    <div id="grad4" style="color:white;text-align:center;">-90deg</div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

使用多个颜色结点

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
    }
    
    #grad2 {
        height: 200px;
        background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
    }
    
    #grad3 {
        height: 200px;
        background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
        background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>3 个颜色结点（均匀分布）</h3>
    <div id="grad1"></div>
    
    <h3>7 个颜色结点（均匀分布）</h3>
    <div id="grad2"></div>
    
    <h3>3 个颜色结点（不均匀分布）</h3>
    <div id="grad3"></div>
    
    <p><strong>注意：</strong> 当未指定百分比时，颜色结点不会自动均匀分布。</p>
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 55px;
        background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
    渐变背景
    </div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

使用透明度（Transparency）

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

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

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

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 透明度</h3>
    <p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

重复的线性渐变

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
        background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
        background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
        background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>重复的线性渐变</h3>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

1.2 CSS3 径向渐变

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

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

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

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

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

径向渐变的实例：

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
        background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 颜色结点均匀分布</h3>
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
        background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 颜色结点不均匀分布</h3>
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

设置形状

shape 参数定义了形状。

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

默认值是 ellipse。

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
        background: radial-gradient(red, yellow, green); /* 标准的语法（必须放在最后） */
    }
    
    #grad2 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
        background: radial-gradient(circle, red, yellow, green); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 形状</h3>
    
    <p><strong>椭圆形 Ellipse（默认）：</strong></p>
    <div id="grad1"></div>
    
    <p><strong>圆形 Circle：</strong></p>
    <div id="grad2"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

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

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

closest-side
farthest-side
closest-corner
farthest-corner

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
    }
    
    #grad2 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
    }
    
    #grad3 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
    }
    
    #grad4 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 不同尺寸大小关键字的使用</h3>
    
    <p><strong>closest-side：</strong></p>
    <div id="grad1"></div>
    
    <p><strong>farthest-side：</strong></p>
    <div id="grad2"></div>
    
    <p><strong>closest-corner：</strong></p>
    <div id="grad3"></div>
    
    <p><strong>farthest-corner（默认）：</strong></p>
    <div id="grad4"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

重复的径向渐变

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

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
        background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
        background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
        background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法（必须放在最后） */
    }
    </style>
    </head>
    <body>
    
    <h3>重复的径向渐变</h3>
    
    <div id="grad1"></div>
    
    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

2. 倒影

倒影的特点：

不占内容宽高
倒影的层级比文档流的高
倒影是相对标签进行倒影

    例如：场景一个div标签里面嵌套一个img标签；
    设置img图片标签的属性
    
    img{
        width: 100px;
    }
    设置div标签的属性
    div{
    
    <!-- 记得设置div浮动，为的是可以将块属性标签div当做一个行标签来使用，清浮动，而且默认宽度不是100%；-->
    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 过渡是元素从一种样式逐渐改变为另一种的效果。

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

指定要添加效果的CSS属性
指定效果的持续时间。

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

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

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

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

规定当鼠标指针悬浮(:hover)于 <div>元素上时：

样例代码：

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
    }
    
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    
    <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    <div></div>
    
    <p>鼠标移动到 div 元素上，查看过渡效果。</p>
    
    </body>
    </html>

多项改变

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div {
        width: 100px;
        height: 100px;
        background: red;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
        transition: width 2s, height 2s, transform 2s;
    }
    
    div:hover {
        width: 200px;
        height: 200px;
        -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        transform: rotate(180deg);
    }
    </style>
    </head>
    <body>
    <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    <div>鼠标移动到 div 元素上，查看过渡效果。</div>
    </body>
    </html>

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    }
    
    div:hover
    {
    width:200px;
    }
    </style>
    </head>
    <body>
    
    <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    
    
    <div></div>
    
    <p>鼠标移动到 div 元素上，查看过渡效果。</p>
    <p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
    
    </body>
    </html>

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
    }
    
    div:hover
    {
    width:200px;
    }
    </style>
    </head>
    <body>
    
    <p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    <div></div>
    
    <p>鼠标移动到 div 元素上，查看过渡效果。</p>
    <p><b>注意：</b> 过渡效果需要等待两秒后才开始。</p>
    
    </body>
    </html>

    例如：一个div标签嵌套了一个img标签和span标签（img和span是同级标签）
    <!--设置图片高度-->
    img{
       height: 218px;
      }
     <!--设置span标签的属性--> 
    span{
        height: 30px;
        width: 100%;
        font-size: 16px;
        color: white;
        text-align: center;;
        line-height: 30px;
        position: absolute;
        left: 0;
        bottom: 0;
        <!--设置开始透明度为0，也就是不显示-->
        opacity: 0;
        <!--设置0.5过渡-->
        transition:all .5s;
      }
      hover 伪类选择器用于选择鼠标指针浮动在上面的元素时触发；对于此时而言，就是鼠标指针浮动在div标签上时，显示span标签上的字体；
    div:hover span{
       <!--设置透明度为1，也就是显示-->
       opacity: 1;
      }

显示效果如下图所示：

transition展示效果

扩展属性：

transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
transition 简写属性，用于在一个属性中设置四个过渡属性。

4.CSS3变形

4.1 2D 转换

主要使用下面五个方法：

translate()
rotate()
scale()
skew()
matrix()

新转换属性

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

Property	描述	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3

2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

4.1.1 translate() 方法

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:translate(50px,100px);
    -ms-transform:translate(50px,100px); /* IE 9 */
    -webkit-transform:translate(50px,100px); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.2 rotate() 方法

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>你好。这是一个 DIV 元素。</div>
    
    <div id="div2">你好。这是一个 DIV 元素。</div>
    
    </body>
    </html>

4.1.3 scale() 方法

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    margin:100px;
    transform:scale(2,4);
    -ms-transform:scale(2,4); /* IE 9 */
    -webkit-transform:scale(2,4); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.4 skew() 方法

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:skew(30deg,20deg);
    -ms-transform:skew(30deg,20deg); /* IE 9 */
    -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.5 matrix() 方法

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

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.6 CSS3 transform 属性

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

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

transform: none|transform-functions;

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。测试
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:200px;
    height:100px;
    background-color:yellow;
    /* Rotate div */
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello</div>
    
    </body>
    </html>

案例：旋转图片

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    body
    {
    margin:30px;
    background-color:#E9E9E9;
    }
    
    div.polaroid
    {
    width:294px;
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    /* Add box-shadow */
    box-shadow:2px 2px 3px #aaaaaa;
    }
    
    div.rotate_left
    {
    float:left;
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    transform:rotate(7deg);
    }
    
    div.rotate_right
    {
    float:left;
    -ms-transform:rotate(-8deg); /* IE 9 */
    -webkit-transform:rotate(-8deg); /* Safari and Chrome */
    transform:rotate(-8deg);
    }
    </style>
    </head>
    <body>
    
    <div class="polaroid rotate_left">
    [站外图片上传中……(30)]
    <p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
    </div>
    
    <div class="polaroid rotate_right">
    [站外图片上传中……(31)]
    <p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
    </div>
    
    
    </body>
    </html>

4.1.7 CSS3 transform-origin 属性

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

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

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

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

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

值	描述
x-axis	定义视图被置于 X 轴的何处。可能的值：left/center/right/length/%
y-axis	定义视图被置于 Y 轴的何处。可能的值：top/center/bottom/length/%
z-axis	定义视图被置于 Z 轴的何处。可能的值：length

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #div1
    {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    padding:10px;
    border: 1px solid black;
    }
    
    #div2
    {
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform: rotate(45deg);
    transform-origin:20% 40%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin:20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -webkit-transform-origin:20% 40%; /* Safari and Chrome */
    }
    </style>
    </head>
    
    <body>
    
    <div id="div1">
      <div id="div2">HELLO</div>
    </div>
    
    </body>
    </html>

4.1.8 transition补充

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

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

如下图所示：

CSS3贝塞尔曲线(cubic-bezier)参数详解
预留的几个特效：
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
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轴平移；

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

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

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

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

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

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

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

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

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

rotateY(angle) 定义沿 Y 轴的 3D 旋转。（这个只需要将上面代码中的rotateX修改为rotateY即可，我们看下沿Y轴旋转的效果）；

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

4.2 3D转换

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

rotateX()
rotateY()

转换属性

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

属性	描述
transform	向元素应用 2D 或 3D 转换。
transform-origin	允许你改变被转换元素的位置。
transform-style	规定被嵌套元素如何在 3D 空间中显示。
perspective	规定 3D 元素的透视效果。
perspective-origin	规定 3D 元素的底部位置。
backface-visibility	定义元素在不面对屏幕时是否可见。

3D 转换方法

函数	描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

4.2.1 rotateX() 方法

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateX method.</p>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.2.2 rotateY() 方法

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:rotateY(130deg);
    -webkit-transform:rotateY(130deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateY method.</p>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>