ie10中新增特性——3d变换
先给大家看一个demo：
http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_3d-transforms.htm
通过这个demo大家可以很直观的查看关于3d变换的各个属性变化。
这里面罗列了3D变换的属性（函数）
这里简单说一下各个属性（函数）的作用：
2d平移：transform：translate (x轴，y轴)
3d平移：transform：translate3d(x轴，y轴，z轴)
translate3d函数通过矢量 [tx,ty,tz] 来指定 3-D 平移，其中 tx、ty 和 tz 分别是第一、第二和第三个平移值参数。
例：
transform:translate3d(30px,30px,30px);
单独改变某一个轴向上的值：
transform: perspective(500px) translateZ(-60px);
3d缩放：scale3d(<number>, <number>, <number>)
scale3d函数通过由三个参数表示的 [sx,sy,sz] 缩放矢量来指定 3-D 缩放操作。
例：
transform: scale3d(0.5, -0.5, 1.5);
单独缩放某一个轴向:
scaleZ(<number>);
3d旋转：rotate3d (<number>, <number>, <number>, <angle>)
这个稍微有点复杂，rotae3d的前三个参数代表元素的旋转方向，取值范围为0-1之间的任何数，第四个参数angle,代表的是每个轴向旋转的角度。比如：
transform: rotate3d(0.3, 0.5, 1, 45deg);
这行代码的意思就是沿x轴旋转45deg的30%，也就是x轴旋转13.5度，y轴旋转45deg的50%，也就是y轴旋转22.5度，z轴旋转45deg的100%，也就是z轴选择45度。
出来的效果就是：
当然也可以对某一个轴向单独进行旋转，在单轴旋转的时候，取值范围只有0和1，小于1大于0的任意数都会认为是1.
对某一个轴向进行旋转还可以用这样的写法：
transform: perspective(500px) rotateX(45deg);
2d倾斜：skew(<angle>, <angle>);
里面的参数就是需要倾斜的角度，需要注意的就是倾斜是以2d坐标的方式倾斜，比如：
transform: perspective(500px) skew(21deg, -20deg);
这行代码表示的就是先以2d坐标的x轴倾斜29度，然后以2d坐标的y轴旋转10度。
出来的效果：
除了以上的属性还有：
transform-origin：length length length;
属性为一个元素创建变换的初始，第一个代表的是x轴的初始位置，第二个代表的是y轴的初始位置，第三个代表的是z轴的初始位置(必须是长度值).
默认的是transform-origin：50% 50% 0px;(元素中间).一般只设前两个参数。
perspective:number;
以像素为单位，表示的是视野的深度，数值越大，离得越远，这个属性跟transform:translateZ变换效果很像，区别就是transform:translateZ会受到transform的其他属性的影响，比如rotateY后，再执行z轴平移就会以旋转后的坐标平移。
重要提示：W3C 规范定义了此属性的 preserve-3d 关键字值，它表示不执行平展操作。平展是啥？平展就是内部构建的3d元素将以平面的方式展示。而目前，Internet Explorer 10 不支持preserve-3d 关键字。这是挺坑爹的，但也没办法，作为变通方式，除了子元素的正常变换，你可以手动将父元素的变换应用到每个子元素。
例：
transform: perspective(50px) rotateY(11deg);
perspective-origin 属性
创建透视属性的初始。它实际上设置 x- 和 y-位置，在该位置观看者好像在观看该元素的子元素。该属性被设置为一或两个长度值,用法跟平移初始一样。、
默认的是perspective -origin：50% 50% 0px;(元素中间).一般只设前两个参数。
backface-visibility 属性
属性指示当观看者面向已变换元素的背面（反面）时，其背面是否可见。对于未变换的元素，该元素的正面面向观看者。
它的属性值为visible表示反面可见,和hidden 表示反面不可见。
例：backface-visibility: visible;
下面通过一个例子来了解属性的使用：
这是最后要实现的效果：
http://www.ibokanfamily.com/win8/3d.html
思路就是旋转它的x轴坐标,然后通过一个动画平移它的y轴坐标值:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>3d变换</title> <style> body{ background:url(http://www.ibokanfamily.com/win8/2.jpg);} @keyframes translateY{ from {transform:perspective(500px) rotateY(0deg) rotateX(70deg) translateY(600px) translateZ(10px);} to {transform:perspective(500px) rotateY(0deg) rotateX(70deg) translateY(50px) translateZ(10px);} } .translateY{ color:white; font-size:16px; overflow:hidden; backface-visibility: visible; width:300px; line-height:50px; margin:0 auto; transform-origin: 50% 50%; transform:perspective(500px) rotateY(0deg) rotateX(70deg) translateY(600px) translateZ(10px); animation:translateY 30s linear infinite; } </style> </head> <body> <div class="translateY"> 北京博看文思科技有限责任公司3G研发中心成立于2005年7月，是国内最具创造性、最具技术实力的3G跨平台（IOS、Android、Windows Mobile、Linux、Web OS）智能移动研发中心。北京博看文思科技有限责任公司3G研发中心技术实力雄厚，拥有自主知识产权的游戏物理引擎、3D引擎和3G跨平台开发框架。截止目前，北京博看文思科技有限责任公司3G研发中心已与众多世界500强跨国企业合作，提供3G开发服务，在国际3G开发市场崭露头角，赢得广泛赞誉。 </div> </body> </html>