2D转换下的zoom和transform:scale的区别

一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到,但是在web的世界里也可以这样理解它的意思,就是改变元素的尺寸,进行等比例的缩放. 在最初的那些尴尬的岁月里,zoom只能被IE浏览器兼容,但是现在能被除了FireFox以外的所有浏览器支持,甚至是移动端浏览器. zoom的值的类型可以是: 1.数值:0~1 当数值为0.…

zoom和transform:scale的区别

小tips: zoom和transform:scale的区别这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=5019 一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他…

小tips: zoom和transform:scale的区别

小tips: zoom和transform:scale的区别转自张鑫旭前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=5019 一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: zoom的字面意思是“变焦”,…

css中zoom和transform:scale的区别

css中zoom和transform:scale的区别关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下面开始进行对zoom的探究. zoom:normal | <number> | <percentage> 默认值:normal 适用于:所有元素继承性:有动画性:是计算值:绝对长度取值: normal: 使用对象的实际尺寸.(等同于zoom:1) <number&g…

zoom和transform:scale()的区别

zoom和transform:scale()都可以用于缩放,目前移动端存在各种各样不同屏幕大小的手机,为了兼容不同宽度的屏幕,我们可以基于某一屏幕宽度大小(比如iPhone5的320,这个根据设计稿来)做出页面后,再对页面进行缩放以兼容其他屏幕宽度. 定义 zoom和transform:scale()具体有什么区别呢?先来看看官方的定义: Specifies the initial zoom factor for the window or viewing area. This is a mag…

css 中 zoom和transform:scale的区别(转载)

一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: zoom的字面意思是“变焦”,摄影的时候常用到的一个概念.对于web上的zoom效果,你也可以按照此概念理解.可以改变页面上元素的尺寸,属于真实尺寸. 在旧的web时代.*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等. 其支持的值类型有:…

zoom与transform:scale的区别

一. zoom特性 1. zoom是IE的私有属性,但目前除Firefox不支持外,其他浏览器支持尚好. 2.定义: zoom即变焦,可改变元素尺寸,属于真实尺寸.zoom:百分值/数值/normal(即1); 简单示例: 二. transform: scale 属于css3规范,IE9+的现代浏览器全部支持. 语法为:transform: scale(x,y);只支持数值(包括负值),不支持百分比; 衍生的属性值包括scaleX,scaleY; 简单示例: 三.对比差异 zoom的缩放是相对于…

zoom，zoom与haslayout的关系，zoom与transform: scale( )的区别

1.zoom:(缩放)…

zoom和transform scale

一.zoom zoom的字面意思是“变焦”,摄影的时候常用到的一个概念.对于web上的zoom效果,你也可以按照此概念理解.可以改变页面上元素的尺寸,属于真实尺寸. 在旧的web时代.*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动,修复一些布局上的疑难杂症等. 其支持的值类型有: 百分比值:zoom:50%,表示缩小到原来的一半. 数值:zoom:0.5,表示缩小到原来的一半. normal关键字:zoom:normal等同于zoom:1. 注意,虽然Chrom…

CSS 3学习——transform 2D转换

首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒子发生了变换,该属性的默认值是"border-box",查MDN只有Firefox支持该属性(我试的没效果). CSS 3 中2D转换的实现用到两个属性: 属性描述 CSS transform 向元素应用 2D 或 3D 转换. 3 transform-origin 指定变换的基点的位置…

CSS3 Transform变形(2D转换)

Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开始,结束.Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.可以设置多个关键贞. Transition与Animation:transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果. 我们首…

CSS3 transform变形（2D转换）

transform 属性应用于2D 或 3D 转换.该属性允许我们对元素进行平移.旋转.缩放或倾斜. 一.translate(x,y).translateX(n).translateY(n)定义2D平移转换根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 若translate(x,y)只定义一个数值,默认y=0. translateX(n):沿着 Y 轴移动元素. translateY(n):沿着 Y 轴移动元素. 如下代码中:translate(50px,100px)表示从…

CSS新特性之2D转换transform

transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x轴和y轴上移动的距离 transform: translateX(n);//x轴上移动的位置 transform: translateY(n);//y轴上移动的位置 1.2举例子 <style type="text/css"> div { width: 200px; heigh…

CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"> 20px圆角 <div style="width:200px; height:100px; border:1px solid red; border-radius:20px;"></div> 20%圆角取宽的20%和高的20% <div style=…

HTML 学习笔记 CSS3 (2D转换)

2.scaleX(<number>) : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数.scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1),其基点一样是在元素的中心位置,我们同样是通过transform-origin来改变元素的基点.如:transform:scaleX(2):通过CSS3转换我们能对元素进行移动缩放转动拉长或者拉伸转换是使元素改变形状尺寸位置的一种效果. 可以使用2D或3D转换来转换你的元素使用transform 来实现这一效…

css3之2D转换

css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换方法: translate() rotate() scale() skew() 首先,我们先插入一个简单的html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-…

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:…

CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径垂直半径 border-radius:水平半径/垂直半径 border-radius:60px 30px 120px 160px/160px 120px 30px 60px ; 单位:百分比和像素.最好使用% 练习盒子阴影 box-shadow 可设置多重边框阴影,增强立体感 box-shadow: 5px 5px 27px red,-5px -5px 27px gr…

CSS中2d转换：transition过渡放在:hover伪类中与应用在整个元素中区别

css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2d转换测试</title> </head> <body> <div id="fr&…

html5——2D转换

transform 属性 1.向元素应用 2D 或 3D 转换 2.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 缩放与位移 transform: scale(, 0.5);//水平缩放,垂直缩放 transform: translate(150px, 150px);//水平位移(正值向右负值向左),垂直位移(正值向下负值向上) <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q…

02-css3之2D转换

一.CSS3 -2D转换转换(transform)可以实现元素的位移.旋转.缩放等效果.可以理解为变形. 1. 2D转换之移动translate 可以改变元素的页面中的位置,类似于定位. 1.1语法 transform:translate(x,y); 1.2用法 .box1 { background-color: #f34; /* 前面是x轴,后面是y轴,两者要用逗号隔开 */ /* 1.translate移动不会影响其他元素的位子 */ transform: translate(80px,…

CSS3 2D 转换

2D 转换在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg);…

css3的2D转换

CSS3的2D转换用transform来实现 1.rotate() /*通过 rotate() 方法,元素顺时针旋转给定的角度.允许负值,元素将逆时针旋转.*/ 2.scal() /*通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数*/ 3.skew() /*通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数*/ 4.tanaslate() /*通过 translate() 方法, 元素从其…

CSS 2D转换 matrix() 详解

2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收两个参数:水平移动的距离.垂直移动的距离 transform: translate(50px, 100px); 可以分别使用 translateX() 或者 translateY() 进行单独指定. rotate():接收一个参数:顺时针(正数)或逆时针(负数)旋转的角度 transform: ro…