【读书笔记】CSS3学习（三）

7.文本效果

CSS3文本效果主要包含多个新的文本特性，用来在正常的文本中实现一些额外的特性。

主要是两个属性的CSS3文本效果
1）text-shadow
文本阴影，指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。

h1{
text-shadow: 5px 5px 5px #FF0000;
}

2）word-wrap
换行，CSS3中自动换行属性允许强制文本换行， 即使这意味着会对单词进行拆分。

p {word-wrap:break-word;}

属性：

---

8.2D转换

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

div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);       /* IE 9 */
-webkit-transform: translate(50px,100px);   /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);      /* Firefox */
}

2）rotate()
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div{
transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);      /* Firefox */
}

3）scale()
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

div{
transform: scale(2,4);
-ms-transform: scale(2,4);  /* IE 9 */
-webkit-transform: scale(2,4);  /* Safari 和 Chrome */
-o-transform: scale(2,4);   /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

4）skew()
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);   /* IE 9 */
-webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);  /* Firefox */
}

5）matrix()
matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

div{
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 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Opera */
}

---

8.3D旋转

rotateX() 方法
通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
rotateY() 旋转
通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
rotateZ() 旋转
通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。
rotate3d() 旋转
通过 rotate3d(x,y,z,a) 方法,x,y,z是一个0~1之间的数值，主要描述元素围绕x,y,z旋转的矢量值。a为角度值，主要来指定元素的3D空间旋转角度，正值为顺时针旋转，否则为逆时针。
转换方法：