CSS3-文字特效和2/3D转换

CSS3 渐变（Gradients）

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

径向渐变（Radial Gradients）- 由它们的中心定义

CSS3 线性渐变

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）

background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(to right, red , blue); /* 标准的语法 */
//线性渐变 - 对角
background: linear-gradient(to bottom right, red , blue);

//使用角度
如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）

//使用角度
角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变
background: linear-gradient(180deg, red, blue); /* 标准的语法 */

//使用多个颜色结点
background: linear-gradient(red, green, blue); /* 标准的语法 */

//使用透明度（transparent）
使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

//重复的线性渐变
epeating-linear-gradient() 函数用于重复线性渐变
background: repeating-linear-gradient(red, yellow 10%, green 20%);
//重复的径向渐变
//不同尺寸大小关键字的使用
//设置形状

CSS3 文本效果

text-shadow

box-shadow

text-overflow

word-wrap

word-break

CSS3 的文本阴影

text-shadow: 5px 5px 5px #FF0000;

CSS3 box-shadow属性

box-shadow: 10px 10px 5px #888888;
//给阴影添加颜色
box-shadow: 10px 10px grey;
//给阴影添加一个模糊效果
box-shadow: 10px 10px 5px grey;

CSS3 Text Overflow属性

CSS3文本溢出属性指定应向用户如何显示溢出内容

还有其他的新文本属性

CSS3 @font-face 规则

以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。

使用CSS3，网页设计师可以使用他/她喜欢的任何字体。

当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。

您所选择的字体在新的CSS3版本有关于@font-face规则描述。

您”自己的”的字体是在 CSS3 @font-face 规则中定义的

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
//粗体文本
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
CSS3 字体描述，这里可以添加如字体大小、拉伸之类的字体描述

CSS3 2D 转换

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸

转换的效果是让某个元素改变形状，大小和位置。

您可以使用 2D 或 3D 转换来转换您的元素

2D 转换

translate()

rotate()

scale()

skew()

matrix()

translate() 方法

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

transform: translate(50px,100px);
从左边元素移动50个像素，并从顶部移动100像素

rotate() 方法

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

transform: rotate(30deg);
rotate值（30deg）元素顺时针旋转30度

scale() 方法

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

transform: scale(2,3); /* 标准语法 */

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

skew() 方法

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

不同浏览器使用不同的方法

transform:skew(20deg,20deg);
-webkit-transform:skew(120deg,30deg);

matrix() 方法

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

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

CSS3 3D 转换

可以进行轴变化

rotateX()

rotateY()

rotateX() 方法

围绕其在一个给定度数X轴旋转的元素

transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);

rotateY() 方法

transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);