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

亮术网 2020-04-09 本网原创

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

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

 

一、scalez语法规则

scalez(<number>)

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

 

二、scale3d语法规则

scale3d(<number>, <number>, <number>)

第一个<number>:表示对象在 X 轴缩放,不能省略;

第二个<number>:表示对象在 Y 轴缩放,不能省略;

第三个<number>:表示对象在 Z 轴缩放,不能省略。

 

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

1、scalez()应用实例

html代码:

<div class="scalez">transform:scalez(.8);</div>

CSS样式:

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

效果图:

transform:scalez(.8);

 

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

 

2、scale3d()应用实例

html代码:

<div class="scalescr">原始大小</div>

<div class="scalescr scale3d">transform:scale3d(.5,.5,.8)</div>

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)

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