您的位置：首页 > Web前端 > CSS

CSS3 3D Transformations

2015-06-19 20:16 471 查看

3D Transformations

The Book of CSS3

Westciv CSS3在线集成工具

在线示例

在3D空间移动旋转，是个处理器密集型操作，不过多数浏览器已经实现了硬件加速，直接通过设备的图像芯片来处理，可以大胆使用而不必有太多性能担心。

3D手势图

在浏览器中，X轴是从左到右，Y轴是从上到下，Z轴是从里到外；这些方向都是0到正值的方向或者说是负值到正值的方向

元素本身其实还是只有两个坐标维度： X和Y；这里只是让它围绕三维空间移动或旋转

<div class="d3-parent">
<div class="d3-child">
<h2>The Book Of</h2>
<h1>CSS3</h1>
</div>
</div>

* 下文中的例子都是基于此HTML

The Transformation Functions

围绕某个坐标轴旋转(rotate)

语法如下：

E {
transform: rotateX(angle);
transform: rotateY(angle);
transform: rotateZ(angle);
}

每个

rotate()

函数接受一个

angle

值，通常使用

degree

. 看下面这个例子，分别沿三个坐标轴旋转45度:

.trans-x { transform: rotateX(45deg); }
.trans-y { transform: rotateY(45deg); }
.trans-z { transform: rotateZ(45deg); }

效果图如下：

如果你想让一个元素围绕两个或三个坐标轴旋转，可以为元素同时使用多个

rotate()

函数:

E { transform: rotateX(angle) rotateY(angle) rotateZ(angle); }

E { transform: rotate3d(x,y,z,angle); }

angle

的值显而易见; 但是

x, y, z

不是那么简单，他们分别接受一个数值(number),用来计算矢量方向(direction vector)，矢量方向是三维空间中的一条线, 从坐标系原点到
x, y, z
值确定的那个点，元素围绕这条线旋转

angle

指定的值。

看下面的例子，分别沿三个不同的矢量方向旋转45度:

.trans-x { transform: rotate3d(1,1,0,45deg); }
.trans-y { transform: rotate3d(1,0,1,45deg); }
.trans-z { transform: rotate3d(0,10,10,45deg); }

效果图如下, 如果想像上面的旋转效果有困难，可以拿张银行卡按矢量方向旋转来看最终效果：

Perspective Function

E { transform: perspective(depth); }

depth

的默认值是

none

，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。

1000px

被认为是个正常值。

看下面的例子：

.trans-1 { transform: perspective(1000px) rotateX(30deg) rotateY(45deg); }
.trans-2 { transform: perspective(250px) rotateX(30deg) rotateY(45deg); }
.trans-3 { transform: perspective(150px) rotateX(30deg) rotateY(45deg); }

若使用

perspective()

函数，那么他必须被放置在

transform

属性的首位，如果放在其他函数之后，则会被忽略。

效果图如下，如果不设置
perspective
，使用默认值
none
，那么会看不到下图DIV边框扭曲的效果，就是说看到的边框的宽度都是一样的；如果设置了
perspective
，你会发现下图DIV边框宽度的微妙变化：

Translation Along the Aixs

translateZ(length)

是3D Transformaton特有的，其他两个2D中就有.

E {
transform: translateX(length);
transform: translateY(length);
transform: translateZ(length);
}

看下面的例子:

trans-z1 { transform: translateZ(-40px); }
trans-z2 { transform: translateZ(40px); }

效果图如下：

同样有个

translate3d()

函数，是对

translate()

函数的扩展，语法如下：

E { transform: translate3d(translateX,translateY,translateZ); }

接受三个数值参数，比如：

E { transform: translate3d(0,100%,1em); }

Scaling

2D Transformations中有

scale() scaleX() scaleY()

三个函数，3D中又多了一个

scaleZ()

, 以及速写函数(shorthand function)

scale3d()

E { transform: scaleZ(number); }

如果只设置

scaleZ(2)

，你会发现元素并没有被扩大或压缩，scaleZ(number)
需要和
translateZ(length)
配合使用，
number
乘以
length
得到的值，是元素沿Z轴移动的距离，从而使得感觉被扩大或压缩。

速写函数

scale3d()

语法：

E { transform: scale3d(scaleX,scaleY,scaleZ); }

看如下例子：

.trans-z1 { transform: scaleZ(2.5) translateZ(-10px); }
.trans-z2 { transform: scale3d(1.25,1.25,4) translateZ(10px); }

例1： 2.5 * -10px = -25px; 所以元素沿着Z轴向里移动25px.

例2： X和Y轴的值分别是1.25，那么X Y轴分别被拉长25%，为1表示保持原大小，不被拉长或压缩；Z轴为4，则 4 * 10px = 40px, 元素在Z轴上向外移动40PX；

效果图如下：

The Transformation Matrix

matrix3d()

函数要比2D中的

matrix()

函数更复杂，他接受16个参数，语法如下：

E {
transform: matrix3d(
m01,m02,m03,m04,
m05,m06,m07,m08,
m09,m10,m11,m12,
m13,m14,m15,m16
);
}

此处放弃此函数，Let go... 如果你特别地感兴趣，参考这里

The perspective and perspective-origin Properties

perspective property
前面介绍了

perspective(depth)

函数，此处介绍具有相似功能的 perspective property.

E { perspective: depth; }

同

perspective()

函数一样，

depth

的默认值是

none

，可以设置为一个长度值，这个长度是沿着Z轴距离坐标原点的距离。他们唯一的区别是，

perspective

属性是被用于元素的子元素，而不是元素本身；就是说，为某个元素设置

perspective

属性后，是对这个元素的子元素起作用，而不是这个元素本身。

perspective-origin property
同
perspective
属性，也是设置在父元素上，对子元素起作用。这个属性来设置你在X, Y轴坐标确定的那个点来看这个元素，Z轴是被

perspective

属性设置的。

E { perspective-origin: x-position y-position; }

x-position

和

y-position

的值可以是关键字、百分比、长度值，默认是

center center

或

50% 50%

；

x-position

关键字有：

left right center

y-position

关键字有：

top bottom center

来看下面的例子：

.d3-parent { perspective: 200px; }
.d3-child { transform: rotateX(45deg) rotateZ(90deg); }
.trans-1 { perspective-origin: left center; }
.trans-2 { perspective-origin: 100% 100%; }
.trans-3 { perspective-origin: 75% 25%; }

效果如下图：

共四个元素，第一个没有设置

perspective-origin

属性，所以是默认值

center center

，后面三个分别对应

.trans-1 .trans-2 .trans-3

The Transformation Origin

该属性设置一点，然后元素按照这个点来transform，具体是哪种transform，是由

transform

属性来确定的。

语法：

E { transform-origin: x y z; }

x y

可以是关键字，长度，百分比，默认值是

center center

或

50% 50%

只能是一个长度值

关键字有：

left right center

关键字有：

top bottom center

来看下面的例子，你可以拿张银行卡，然后用左手的拇指和食指夹住卡片上的那个点，再旋转，找找感觉：

.d3-child { transform: rotateX(45deg) rotateZ(90deg); }
.trans-1 { transform-origin: 50% 0 0; }
.trans-2 { transform-origin: 50% 100% 0; }
.trans-3 { transform-origin: center bottom -50px; }

效果如下图：

共四个元素，第一个没有设置

transform-origin

属性，所以默认值是

transform-origin: 50% 50% 0;

The transform-style Property

使用了3D Transform的元素，他的后代元素的所有transformation function默认都会被忽略，如果想让他们不被忽略，需要设置

transform-style

属性。

IE10和11不支持

语法：

E { transform-style: keyword; }

默认值是

flat

，还可设置为

preserve-3d

来看下面的例子：

.trans-1 { transform-style: flat; }
.trans-2 { transform-style: preserve-3d; }

效果如下图：

Showing or Hiding the Backface

backface-visibility

属性用来设置，是否显示元素的背面，默认是显示的。

语法：

E { backface-visibility: keyword; }

keyword

有两个值，

hidden

和

visible

，默认值是

visible

。

来看下面的例子：

.d3-child {
backface-visibility: visible;
transform: rotateY(180deg);
}
.bf-hidden { backface-visibility: hidden; }

效果如下图：

此文是对《The Book of CSS3 2nd edition》第13章的翻译、理解和归纳，方便以后查阅。

感谢其作者Peter Gasston !

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航