ie10 3D变换

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>