CSS自学笔记（13）:CSS3 2D/3D转换

CSS3中新增了对元素进行2D和3D的转换效果，这样可以是开发人员很方便的做出视觉效果更好的网页来。

通过CSS3中属性的定义，我们可以对元素进行移动、缩放、拉伸、旋转等等，可以通过定义transform属性来实现转换效果。

浏览器支持

属性	浏览器支持
2D transform	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera
3D transform	IE	Firefox	Chrome(-webkit-)	Safari(-webkit-)	Opera

目前的主浏览器都已经支持2D效果的transform属性，3D效果的transform只有Opera不支持。同时要注意到时，在定义transform属性时，在Chrome和Safari浏览器中需要加(-webkit-)前缀。

transform属性的部分方法

函数	描述
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 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translate(x,y)	定义 2D 转换。
translateX(x)	定义 2D/3D 转换，沿着 X 轴移动元素。
translateY(y)	定义 2D/3D 转换，沿着 Y 轴移动元素。
translateZ(z)	定义 3D 转换，沿着 Z 轴移动元素。
scale3d(x,y,z)	定义 3D 缩放转换。
scale(x,y)	定义 2D 缩放转换。
scaleX(x)	定义 2D/3D 缩放转换，通过给定一个 X 轴的值(宽度)。
scaleY(y)	定义 2D/3D 缩放转换，通过给定一个 Y 轴的值(高度)。
scaleZ(z)	定义 3D 缩放转换，通过给定一个Z轴的值。
rotate(angle)	定义 2D 旋转。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义 3D 旋转，通过给定的值沿着 X 轴旋转。
rotateY(angle)	定义 3D 旋转，通过给定的值沿着 Y 轴旋转。
rotateZ(angle)	定义 3D 旋转，通过给定的值沿着 Z 轴旋转。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，通过给定的值沿着 X 轴倾斜。
skewY(angle)	定义 2D 倾斜转换，通过给定的值沿着 Y 轴倾斜。
perspective(n)	定义 3D 转换元素的透视视图。

注：angle为度数值

在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

transform属性的语法结构：

	transform:none | <transform-function> [ <transform-function> ]*
也就是：
	transform:rotate|scale|skew| translate|matrix;

通过rotate(angle)，可以对元素进行旋转操作，如果给定值为负值，元素会逆时针旋转。

*{
	transform: rotatey(130deg); transform: rotate(20deg);
}

无转换

(3D转换)transform:rotateY(130deg)

(2D转换)transform: rotate(20deg);

通过scale()方法，可以通过给定倍数对元素的尺寸进行放大或者缩小。

*{
	transform: scale(4,2);
}

无转换元素

transform: scale(4,2);

通过skew()方法，可以通过给定的角度值，对元素的X轴和Y轴进行翻转。

*{
	transform: skew(20deg,20deg);
}

无转换元素

transform: skew(20deg, 20deg);

我们通过一个就简单的导航栏看看transform属性各个方法的效果：

关键部分的CSS代码：

.menu ul {
    list-style-type: none;
    border-top: 10px solid gray;
}
.menu ul li a {
    color: #fff;
    float: left;
    margin: 0 5px;
    font-size: 15px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 80px;
    padding: 10px 5px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 1px #000, inset 0 0 2px #000;
    text-shadow: 0 2px 2px #000;
    text-decoration: none;
}
.menu ul li a {
    background: #2EC7D2;
}

.menu ul li.translate a:hover {
    transform: translate(-10px, -10px);
}
.menu ul li.translate-x a:hover {
    transform: translateX(-10px);
}
.menu ul li.translate-y a:hover {
    transform: translateY(-10px);
}
.menu ul li.rotate a:hover {
    transform: rotate(30deg);
}
.menu ul li.scale a:hover {
    transform: scale(0.8, 0.8);
}
.menu ul li.scale-x a:hover {
    transform: scaleX(0.8);
}
.menu ul li.scale-y a:hover {
    transform: scaleY(1.2);
}
.menu ul li.skew a:hover {
    transform: skew(30deg, 30deg);
}
.menu ul li.skew-x a:hover {
    transform: skewX(-30deg);
}
.menu ul li.skew-y a:hover {
    transform: skewY(30deg);
}
.menu ul li.matrix a:hover {
    transform: matrix(1, 1, -1, 0, 0, 0);
}
.menu ul li.rotate-y a:hover {
    transform:rotateY(120deg);
}
.menu ul li.rotate-z a:hover {
    transform:rotateZ(120deg);
}
.menu ul li.perspective a:hover {
    transform:perspective(50px) rotateY(30deg);
}
.menu ul li.transform-origin a {
    transform-origin: left;
}

部分html代码：

<div class="menu">
    <ul class="clearfix">
        <li class="item translate"><a href="#">Translate</a></li>
        <li class="item translate-x"><a href="#">TranslateX</a></li>
        <li class="item translate-y"><a href="#">TranslateY</a></li>
        <li class="item rotate"><a href="#">Rotate</a></li>
        <li class="item scale"><a href="#">Scale</a></li>
        <li class="item scale-x"><a href="#">ScaleX</a></li>
        <li class="item scale-y"><a href="#">ScaleY</a></li>
        <li class="item skew"><a href="#">Skew</a></li>
        <li class="item skew-x"><a href="#">SkewX</a></li>
        <li class="item skew-y"><a href="#">SkewY</a></li>
        <li class="item matrix"><a href="#">Matrix</a></li>
        <li class="item rotate-y"><a href="#">RotateY</a></li>
        <li class="item rotate-z"><a href="#">RotateZ</a></li>
        <li class="item perspective"><a href="#">perspective</a></li>
    </ul>
</div>