当前位置: 萬仟网 > IT编程>网页制作>CSS > css3的transform中scale缩放详解

css3的transform中scale缩放详解

2019年07月25日  | 萬仟网IT编程  | 我要评论
这篇文章主要介绍了css3的transform中scale缩放的使用方法,需要的朋友可以参考下... 14-12-08

下面我们从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;
}

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

  • IE最新的欺骗代码

    <p><a id="spoof" href="web.cn/" target="_blank">http:/... [阅读全文]
  • Head内常用标签

    Head内常用标签

    一、标签分类 1.1 自闭和标签 自闭和标签只有开头没有结尾,自动闭合: 1.2主动闭合标签 有开头也有结尾,是主动闭合的,称为主动闭合标签,我们用... [阅读全文]
  • viewer.js图片预览插件

    记录贴。介绍图片预览插件用法防止以后用到。下面这网址对view.js上手较快 下面我记录下比较关键的步骤 <--引入重要库--> 然后就是img标... [阅读全文]
  • css3实现冲击波效果的示例代码

    css3实现冲击波效果的示例代码

    本篇文章主要介绍了css3实现冲击波效果的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ... 18-01-11 [阅读全文]
  • 前端知识点总结

    js中的map()函数 map()方法将调用的数组的每个元素传递给指定的函数,并返回一个新数组,它包含该函数的返回值,用法如下: 例:将数组中的每个元素求二次... [阅读全文]
  • CSS3实现同时执行倾斜和旋转的动画效果

    这篇文章通过实例代码给大家主要介绍了,如何利用CSS3实现同时执行倾斜和旋转的动画效果,文中给出了完整的实例代码,大家直接运行就可以看到效果,有需要的朋友们可以... [阅读全文]
  • CSS实现的一闪而过的图片闪光效果

    这种当鼠标悬停时光泽一闪而过。十分的简单,但非常的漂亮。在重新设计网站版面时,我很想在我的logo上使用这种效果。... 14-04-23 [阅读全文]
  • 如何设计高扩展的在线网页制作平台

    如何设计高扩展的在线网页制作平台

    如何设计高扩展的在线网页制作平台 背景 2018年3月份开始,随着运满满的快速发展,开始在频繁的迭代各种活动,那时最快的方式就是拷贝老的... [阅读全文]
  • CSS3属性 line-clamp控制文本行数的使用

    这篇文章主要介绍了CSS3属性 line-clamp控制文本行数的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... [阅读全文]
  • CSS3实现毛玻璃效果

    CSS3实现毛玻璃效果

    思路用before实现,给div添加一个before伪类,背景与大背景相同,大小也一致,使用z-index放在d... [阅读全文]
验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com