CSS3 三维空间缩放 scale3d()scalez()应用实例
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;}
效果图:
从效果图中可以看出,由于不是立方体结构,看不出长方形和文字的变化。
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);}
效果图:
从上图可以看出,长方形在水平面变化非常明显,被缩放到可能只有原来的四分之一大小。
-
相关阅读
- CSS3 大小缩放scale()scalex()scaley(
- CSS3 Filter 滤镜透明效果应用实例
- CSS3 text-shadow语法规则及上下左右文字阴
- CSS3 鼠标经过背景高亮/反亮显示(transition语法
- CSS3 旋转 rotate3d()rotatez(
- CSS3 animation-duration属性及文字闪
- CSS3 backface-visibility 360度旋转方
- CSS3 perspective from to透视
- CSS3 摇摇文字动画实例及animation-iteration-co
- CSS3 matrix双板划水、拉伸、打板动画实例anima
- CSS3定义各种圆角边框语法规则及实例border-ra
- CSS3不同内核浏览器的书写规则(-ms/-moz/-webkit/