Html+Css CSS3_transform属性中的_scale属性值
来源:互联网 发布:删除一列数据的sql语句 编辑:程序博客网 时间:2024/06/05 17:09
上一篇讲了translate,这一次我们再细讲一下scale.
下面我们从3个方面开始介绍:
1、scale(x,y) 对元素进行缩放
- X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
- Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
- transform:scale(2,2.5);
2、scaleX(<number>) 元素只在X轴(水平方向)缩放元素。
- 默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
- transform:scaleX(2);
3、scaleY(<number>) 元素只在Y轴(垂直方向)缩放元素。
- 基点一样在元素的中心位置。可以通过transform-origin来改变基点。
- transform:scaleY(2);
最后我们看看兼容性写法:
- .test{
- -moz-transform:scale(2,2);
- -webkit-transform:scale(2,2);
- -o-transform:scale(2,2);
- background:url(img/i.png) no-repeat;
- width:198px;
- height:133px;
- }
样板代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> .right_div .topicons li a:hover img{ -webkit-transform:scale(1.5,1.5); -moz-transform:scale(1.5,1.5); -transform:scale(1.5,1.5); } </style> </head> <body> <div class="right_div"> <ul class="topicons"> <li><div class="img1"><a href="#"><img src="images/test.jpg" /></a></div><p>企业统一门户</p></li> </ul> </div> </body></html>
另附上transform的属性值
语法
transform: none|transform-functions;
0 0
- Html+Css CSS3_transform属性中的_scale属性值
- Html+CSS transform属性中的 rotate 属性值
- Html+CSS transform属性中的 translate属性值
- html 标签,CSS属性
- HTML CSS 属性大全
- html css属性
- html css属性记录
- HTML CSS 属性
- CSS 属性值中的百分比
- 属性 css类 HTML代码/文本/值
- JQuery【属性、CSS类、html、文本、值】
- js修改css属性、html属性
- js修改css属性、html属性
- CSS中的属性缩写
- CSS中的cursor属性
- css中的属性
- CSS中的属性
- css中的border属性
- 10大靓汤制作方法
- eclipse启动参数设置
- JAVA标准系列(JMX)
- JAVA标准系列(java规范)
- JAVA标准系列(JSR的标准化的一般…
- Html+Css CSS3_transform属性中的_scale属性值
- JAVA标准系列(JSR 237: Work Mana…
- JAVA标准系列(JSR 206: Java API …
- String、StringBuffer、StringBuilder
- JAVA标准系列(JSR 207: Process D…
- JAVA标准系列(JSR 235: Service D…
- JAVA标准系列(JSR 208: Java Busi…
- JAVA标准系列(JSR 4: ECperf Benc…
- Android Studio系列教程一--下载与安装