css3的transform中scale缩放详解
发布时间:2014-12-08 09:35:38 作者:佚名 我要评论
这篇文章主要介绍了css3的transform中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;
}
相关文章
- CSS3媒体查询是一种用于根据设备的特性和特定条件来应用不同样式的CSS技术,媒体查询使用@media规则来定义,本文给大家介绍CSS3媒体查询简介与使用方法,感兴趣的朋友一起2024-06-14
- CSS是一种强大的样式表语言,可以为网页添加各种各样的样式和效果,而CSS3作为CSS的第三个版本,引入了许多新的样式属性和用法,为我们提供了更多创意和自由度,本文将介绍一2024-06-11
CSS3 max/min-content及fit-content、fill-available值的案例详解
在CSS3中对width的值多了几个值:fill-available,max-content,min-content, 以及fit-content,本文通过案例讲解CSS3 max/min-content及fit-content、fill-available值的相2024-06-11- 这篇文章主要介绍了CSS3 grid 布局的简单使用示例详解,可以选择使用 absolute 绝对定位为这些块元素定位,也可以使用多个盒子嵌套来实现,结合实例代码给大家介绍的非常详细2024-06-04
- 媒体查询可以根据设备特性,如屏幕宽度、高度、设备方向(横向或纵向),为设备定义独立的CSS样式表,这篇文章主要介绍了CSS3媒体查询与页面自适应,需要的朋友可以参考下2024-05-29
ElementUl 中时间线Timeline 的样式优化方案
这篇文章主要介绍了ElementUl 中时间线Timeline 的样式优化方案,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-05-29- 在CSS3中,var()函数是一个用于插入CSS自定义属性(也称为CSS变量)的值的函数,它允许你在样式表中定义可重用的值,并在多个地方引用它们,从而使你的CSS更加灵活和可维护2024-05-21
- 当页面body拥有zoom属性之后,鼠标划过echarts图表时,触发位置就不正常,这篇文章主要介绍了echarts图表鼠标悬停时图例错位的解决方案,需要的朋友可以参考下2024-05-15
CSS user-select 属性(是否允许用户选中文本)
user-select属性是css3规范中新增的一个功能,用于设置或检索是否允许用户选中文本,使用语法是“user-select:none |text| all | element”,其默认值是text,并且适用于除2024-05-05- 本文主要介绍了css3实现四周线条环绕流动效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-02-21
最新评论