38. CSS3变形之缩放 scale()
缩放scale()
函数让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况:
1、scale(X,Y)
使元素水平方向和垂直方向同时缩放(也就是 X 轴和 Y 轴同时缩放)
例如:
div:hover { -webkit-transform: scale(1.5,0.5); -moz-transform:scale(1.5,0.5) transform: scale(1.5,0.5); }
注意:Y 是一个可选参数,如果没有设置 Y 值,则表示 X,Y 两个方向的缩放倍数是一样的。
2、scaleX(x)
元素仅水平方向缩放(X 轴缩放)
3、scaleY(y)
元素仅垂直方向缩放(Y 轴缩放)
HTML 代码:
<div class="wrapper"> <div>我将放大 1.5 倍</div> </div>
CSS 代码:
.wrapper { width: 200px; height: 200px; border:2px dashed red; margin: 100px auto; } .wrapper div { width: 200px; height: 200px; line-height: 200px; background: orange; text-align: center; color: #fff; } .wrapper div:hover { opacity: .5; -webkit-transform: scale(1.5); -moz-transform:scale(1.5) transform: scale(1.5); }
效果如下:
注意: scale()
的取值默认的值为 1,当值设置为0.01 到 0.99之间的任何值,作用使一个元素缩小;而任何大于或等于 1.01的值,作用是让元素放大。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 38. CSS3变形之缩放 scale()
码云笔记 » 38. CSS3变形之缩放 scale()