css3 3d旋转兼容模式下,CSS3 transform3D

页面仔总是不甘于做页面仔，既然了解了transform3D怎么会放弃这个提升逼格的好机会啊。。虽然人家已经火了四五年了~~~~(>_

起：页面元素3D变换可以通过transform:rotateX(n deg) rotateY(m deg) rotateZ(x deg);实现。

1、对该元素或其父辈元素上创建三维场景

利用perspective和perspective-orgin，transform-style创建3d场景

perspective：透视、视角。其值代表透视点距离屏幕的距离。

perspective-orgin:眼睛看的位置 (50%,50%)屏幕正中央。

transform-style：preserve-3d表示3D透视。

2、rotateX:以x轴为旋转轴。

实例一：可视化transform值变化demo

实例二：鼠标hover图片3D摆动

前提：

1、//获取鼠标坐标(jquery)

$(document).mousemove(function(e){

$("span").text("X:"+e.pageX+",y:"+e.pageY);

});

获取到的鼠标坐标始终是相对屏幕而言。改变mousemove对象只是改变触发环境，对值无影响。

2、旋转应该是有两个方向。绕X轴和Y轴。根据当前鼠标与轴的相对位置来计算转动幅度。另注意正负值。参见实例一可确定方向。

实例三：日历翻页效果

主要利用了transform值为90时，没有厚度的元素为不可见状态。