矩阵在CSS3 3D旋转和2D旋转上的应用

一、CSS3 矩阵2D旋转

2D旋转相对于3D旋转来说比较简单，主要体现在比较好理解，看下面一个例子

摸我

当鼠标移动上面的红色方块时，方块环绕其自身的中心旋转45度，主要代码如下：

#sample1{
width:100px;
height:50px;
background-color:red;
transition:all 1s;
-webkit-transition:all 1s;
-moz-transition:all 1s;
}
#sample1:hover{
transform:matrix(0.7072,-0.7072,0.7072,0.7072,0,0);
-webkit-transform:matrix(0.7072,-0.7072,0.7072,0.7072,0,0);
}

同时，顺时针旋转角为α 时，对应的矩阵是：matrix(cosα,-sinα,sinα,cosα,0,0)

逆时针旋转角为α 时，对应的矩阵是：matrix(cosα,sinα,-sinα,cosα,0,0)

旋转中心的不同，会影响旋转的结果，默认情况下的旋转中心是旋转物体的中心，xy轴所在平面为电脑显示器的平面，如下图所示

如需改变旋转中心（原点）则可以使用CSS3提供的 transform-origin属性, transform-origin原点设置方法，请参照http://www.w3school.com.cn/cssref/pr_transform-origin.asp 下图示例2，是把旋转中心（原点）设置为div的右下角

摸我

二、CSS3 矩阵3D旋转

3D旋转我们讨论的是绕轴旋转，不包括一般的绕任意3维直线的旋转，因为对于任意直线来说，需要将直线平移至坐标原点，然后再将直线旋转至一个直面，然后再旋转至平行坐标轴，再进行旋转，旋转完之后，再逆过程走一遍。比较麻烦。而直接研究绕轴旋转则简单的多。

3D旋转公式：

绕X轴：matrix(1,0,0,0,0,cosα,-sinα,0,0,sinα,cosα,0,0,0,0,1)

绕Y轴：matrix(cosα,0,-sinα,0,0,1,0,0,sinα,0,cosα,0,0,0,0,1)

绕Z轴：matrix(cosα,-sinα,0,0,sinα,cosα,0,0,0,0,1,0,0,0,0,1)

在讨论之前，我们先来看一下三维空间的旋转，默认的X、Y、Z轴是怎样分布的，见下图。

可以看到，实际上3D在原来的2D基础上，多了一个Z轴，而这个Z轴的方向，就是正对着屏幕的方向向外延伸，所以作为一个2D屏幕来说，呈现的效果就是二维的3D效果，而这种效果的主要表现形式就是以透视(perspective)的形式展现的。按照这个坐标轴来看，绕Z轴旋转就等于2D的旋转，下面是个绕Z轴旋转45度的例子：

摸我：我是3D绕Z轴旋转

显而易见，和本文第一种2D旋转看起来是一样的，但是本质的区别是这个是个3d的绕Z轴旋转，只是因为Z垂直于屏幕的方向，所以看起来和2D旋转并没有什么区别，现在我们来看一下绕Y轴和绕X轴旋转，如下：

摸我：我是3D绕Y轴旋转

摸我：我是3D绕X轴旋转

哈哈，怎么样是不是有那么一丁点感觉了，不过看起来怪怪的，好像是直接压缩的一样。效果有点差强人意。这就是前面提到的缺少真实感主要是因为没有透视的效果。有了透视效果才能有更真实的3D效果。透视效果指的就是近大远小理论，默认的观察点（屏幕外的我们的眼睛）距离屏幕内的DIV的距离是无限远效果，所以看不出透视效果。CSS3给我们提供了一个定义透视的属性：perspective,并且有两种设置perspective的方法，一种是元素透视：transform:perspective(n)，一种是舞台透视：perspective(n)。两种的区别就是第一种是针对当前元素，改变的是当前元素的透视效果，第二种是舞台透视，设置在父元素上，则父元素下的所有子元素都会获得这个透视效果。并且这些子元素使用的是同一个舞台。例子如下：

元素透视，拥有独立透视

元素透视，拥有独立透视

元素透视，拥有独立透视

元素透视，拥有独立透视

元素透视，拥有独立透视

舞台透视，同一个舞台

舞台透视，同一个舞台

舞台透视，同一个舞台

舞台透视，同一个舞台

舞台透视，同一个舞台

好了,简单总结，就是这样，不完善的地方后续再添加和修改。