矩阵在CSS3 3D旋转和2D旋转上的应用
2016-10-23 11:30
387 查看
一、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)。两种的区别就是第一种是针对当前元素,改变的是当前元素的透视效果,第二种是舞台透视,设置在父元素上,则父元素下的所有子元素都会获得这个透视效果。并且这些子元素使用的是同一个舞台。例子如下:
元素透视,拥有独立透视
元素透视,拥有独立透视
元素透视,拥有独立透视
元素透视,拥有独立透视
元素透视,拥有独立透视
舞台透视,同一个舞台
舞台透视,同一个舞台
舞台透视,同一个舞台
舞台透视,同一个舞台
舞台透视,同一个舞台
好了,简单总结,就是这样,不完善的地方后续再添加和修改。
相关文章推荐
- css3 动画之 2D旋转 3D旋转 放大
- css3 2D和3D旋转效果
- [Unity] 3D数学基础 - 2D旋转矩阵
- 2D、3D旋转矩阵
- 3 * 3,应用在2D中的矩阵结构,及位移,旋转,缩放的内部应用
- 8款迷人的jQuery/CSS3 3D应用插件
- 笛卡尔坐标系的旋转矩阵在OpenGL坐标系的应用
- 2D Skinned Mesh(3D的完全翻版 带旋转)
- css3 3D旋转正方体
- 利用 css3 的图形3d翻转效果应用demo 分类: css3 2014-01-27 16:44 462人阅读 评论(0) 收藏
- CSS3和js弄出来的3D旋转效果
- Android应用: 3D旋转球
- Unity手游之路<四>3d旋转-四元数,欧拉角和变幻矩阵
- 3D中矩阵旋转、缩放及投影的公式
- [原]Unity手游之路<四>3d旋转-四元数,欧拉角和变幻矩阵
- [原]Unity手游之路 四 3d旋转-四元数,欧拉角和变幻矩阵
- [转]Unity 3D旋转矢量方向及二维平面基于一点选择另一点(Rotate a Vector3 direction & Rotate a point about another point in 2D )
- 【Android应用开发】-(11)使用JPCT-AE 3D框架实现旋转的立方体(附效果图及源码)
- css3之transform-styl 3D旋转效果
- CATransform3D 矩阵变换之立方体旋转实现细节