-ms-transform: scale()/* IE 9 */
-webkit-transform: scale()/* Safari and Chrome */
括号里面填你想放大的数值,小于1为缩小,大于1为放大,1为原图
可以用css3中“transform: scale()”属性对图片进行缩放。
1、新建html文档,在body标签中添加一张图片,给这张图片设置css属性,添加“tansform”缩放属性,属性值为“scaleX(n)”,scaleX(n)指的是对宽度进行缩放,n指的是缩放比例:
2、将transform的属性值改为“scaleY(n)”,scaleY(n)指的是对高度进行缩放,n指的是缩放比例:
3、将transform的属性值改为“scale(n)”,scale(n)指的是对图片的宽度和高度同时进行等比例缩放,n指的是缩放比例:
用CSS3中的transfrom:scale{x,y}来放大,如下:
<style>
*{margin:0padding:0}
div{border:solid 1px #333width:40pxheight:40px}
div img{width:40pxheight:40pxtransition:all 0.3s}
div img:hover{transfrom:scale{2,2}}//从中心放大两部
</style>
<div><img src="图片地址" alt=""/></div>
扩展资料:注意事项
transfrom是利用线性代数来存放一个控件(或许是图片)的具体信息.(由于可以通过transfrom直接操作控件.所以肯定直接或者间接的存储着点的信息和控件的大小等信息)
1、移动.左移右移或者上移下移:
CGAffineTransformMakeTranslation(X偏移量,Y偏移量)
CGAffineTransformTranslate(在某个transform的基础上-一般为自身,X偏移量,Y偏移量)
2、改变大小(形变):
CGAffineTransformMakeScale(宽缩放的倍数,高缩放的倍数)
CGAffineTransformScale(在某个transform的基础上-一般为自身,宽缩放的倍数,高缩放的倍数)