css scale3d,CSS3 三维空间缩放 scale3d()scalez()应用实例

CSS3新增了一系列制作动画的属性，其中有一个用于设置对象(如 div、ul li、文字等)大小缩放的属性scale。scale可在 X、Y 和 Z轴缩放，对应的属性分别为 scalex、scaley 和 scalez；同时设置在 X、Y 与 Z 轴的值就是对象在三维空间缩放。

如果只要求对象在平面中缩放，使用scale属性即可；如果要求对象在三维空间中缩放，使用scale3d。在平面缩放的情况在前面的文章中已经介绍过，本篇继续介绍在空间缩放，先介绍 scalez 和 scale3d 的语法规则，再分别列举一个应用实例。

一、scalez语法规则

scalez()

scalez用于设置对象在Z轴的大小缩放，表达式中的表示缩放尺寸，例如，缩小取 .8(缩小到原来的80%)，放大取 1.5(放大到原来的1.5倍)。

二、scale3d语法规则

scale3d(, , )

第一个：表示对象在 X 轴缩放，不能省略；

第二个：表示对象在 Y 轴缩放，不能省略；

第三个：表示对象在 Z 轴缩放，不能省略。

三、scalez() 和 scale3d()应用实例

1、scalez()应用实例

html代码：

transform:scalez(.8);

CSS样式：

.scalez{transform:scalez(.8);width:210px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0;padding:8px;}

效果图：

transform:scalez(.8);

从效果图中可以看出，由于不是立方体结构，看不出长方形和文字的变化。

2、scale3d()应用实例

html代码：

原始大小

transform:scale3d(.5,.5,.8)

CSS样式：

.scalescr{width:310px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

.scale3d{transform:scale3d(.5,.5,.8);}

效果图：

原始大小

transform:scale3d(.5,.5,.8)

从上图可以看出，长方形在水平面变化非常明显，被缩放到可能只有原来的四分之一大小。