您现在的位置是:网站首页> 编程资料编程资料
CSS中的zoom属性和scale属性的用法及区别详解CSS中zoom属性或overflow:auto属性清除浮动的作用IE浏览器专有css属性之zoom详解CSS中不为人知Zoom属性的使用介绍(IE私有属性)css中zoom:1属性的定义和作用
2021-09-05
843人已围观
简介 这篇文章主要介绍了CSS中的zoom属性和scale属性的用法及区别,是CSS入门学习中的基础知识,需要的朋友可以参考下
zoom 属性
语法:
zoom:normal |
默认值:normal
适用于:所有元素
继承性:有
取值:
normal:
使用对象的实际尺寸。
用浮点数来定义缩放比例。不允许负值
用百分比来定义缩放比例。不允许负值
说明:
设置或检索对象的缩放比例。
对应的脚本特性为zoom。
Scale属性
scale属性的取值为2个,它本身其实相当于一个函数,因为它的写法就和函数一样:
scale();
scale(x);
scale(x,y);
1、scale(x,y) 对元素进行缩放
X表示水平方向缩放的倍数 Y表示垂直方向的缩放倍数
Y是一个可选参数,没有设置的话,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
transform:scale(2,2.5);
2、scaleX(
默认值是1,基点一样在元素的中心位置。可以通过transform-origin来改变基点
transform:scaleX(2);
3、scaleY(
基点一样在元素的中心位置。可以通过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;
- }
zoom和scale的区别
zoom和scale这两个东西都是用于对元素的缩放,但两者除了兼容性之外还有一些不同的地方。zoom缩放会将元素保持在左上角,而scale默认是中间位置,可以通过transform-origin来设置。另外他们执行的渲染顺序也不同zoom可能影响到盒子的计算。
运行
- "-webkit-transform:scale(0.5);">
- "
- -webkit-transform-origin:top left;
- -webkit-transform:scale(0.5);
- ">
- "zoom:0.5;">
相关内容
- CSS的animation属性使用实例讲解CSS3中Animation属性的使用详解深入探究CSS中Animations和Transitions的工作原理CSS3的transition和animation的用法实例介绍
- 使用CSS3配合IE滤镜实现渐变和投影的效果IE滤镜与CSS3效果(详细整理分享)
- 深入讲解CSS中盒模型的用法css3弹性盒模型(Flexbox)详细介绍css3弹性盒模型实例介绍css盒模型和块级、行内元素深入理解
- 纯CSS实现多级半透明效果菜单代码css实现背景半透明文字不透明的效果示例纯css实现背景图片半透明内容不透明的方法利用CSS3制作简单的3d半透明立方体图片展示用CSS设定一个元素半透明css3实现的半透明遮罩lightbox效果源码 纯CSS实现鼠标放上滑动出半透明效果的文字说明(新手小白 必看)
- 详解CSS中的Box Model盒属性的使用CSS Transition通过改变Height实现展开收起元素从QQtabBar看css命名规范BEM的详细介绍css实现两栏布局,左侧固定宽,右侧自适应的多种方法CSS 实现Chrome标签栏的技巧CSS实现两列布局的N种方法CSS实现隐藏搜索框功能(动画正反向序列)CSS3中Animation实现简单的手指点击动画的示例详解CSS中的特指度和层叠问题详解overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷)关于CSS浮动与取消浮动的问题
- css3实现的多级渐变下拉菜单导航效果代码CSS3带有多级下拉菜单的弹性展开下拉动画效果源码CSS3实现随意定制的多级下拉导航菜单效果(无需JS和图片)漂亮的css3功能菜单多级的实现代码
- CSS3实现可关闭的下拉手风琴菜单效果超酷炫 CSS3垂直手风琴菜单纯CSS3实现手风琴风格菜单具体步骤用纯CSS实现手风琴效果的示例代码
- CSS3区域模块region相关编写示例css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果
- 纯CSS实现酷黑风格三级下拉菜单效果代码CSS3模拟动画下拉菜单效果CSS导航栏及弹窗示例代码CSS下拉菜单简单制作教程 你值得拥有的CSS下拉菜单效果纯html+css制作三级下拉菜单基于CSS实现的4级下拉菜单效果代码CSS实现的灰色下拉菜单效果代码基于CSS实现带阴影和小箭头的黑色风格下拉菜单效果css3实现的多级渐变下拉菜单导航效果代码CSS中下拉菜单和表单以及弹出层的简单笔记
- 纯CSS3实现飘逸洒脱带有飞行效果的三级下拉菜单CSS3制作Dropdown下拉菜单的方法纯CSS3实现的华丽网站下拉菜单导航特效源码纯CSS3实现的3D旋转下拉菜单效果源码 纯css3实现的螺旋状动态旋转导航下拉菜单效果源码HTML5+CSS3实现的超级可爱的鬼脸表情下拉菜单效果源码CSS3带有多级下拉菜单的弹性展开下拉动画效果源码纯CSS3实现的支持多菜单展开手风琴下拉菜单效果源码 jQuery+CSS3实现的支持多菜单展开手风琴下拉菜单效果源码