CSS 3学习——transform 2D转换

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

CSS 3 学习——transform 3D转换渲染

以下内容根据官方规范翻译,没有翻译关于SVG变换的内容和关于矩阵计算的内容. 一般情况下,元素在一个无景深无立体感的平面(flat plane)上渲染,这个平面就是其包含块所处的平面.同时,页面上的其他元素也共享这个平面.2D变换函数虽然能改变元素的表现,但是这个被改变的元素仍然是在其包含块所处的平面内被渲染. 3D变换会产生一个变换矩阵,该变换矩阵在Z轴上的分量不为0.结果是把元素渲染到一个不同于其包含块所处的平面内.这将影响到通常情况下的"后来居上"的渲染规则:变换元素可能会和其相…

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…

css 2D转换 transform-rotate 画插图

学习了一点2D转换,关于Transfrom-rotate的小用法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. 下面看实例第一个例子是没有使用rotate,而是简单的就写一个容器,然后往容器中填写实物. <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>photoshow</title> <sty…

CSS3 Transform变形(2D转换)

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

css3学习笔记之2D转换

translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:red; border:1px…

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&…

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

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

css 2D转换总结

CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转换的函数一共分为五大类: translate() 定义位移的函数:其中后面的参数分别是相对x轴,y轴的偏移的距离,单位为像素,形式:translate(30px,30px);表示相对x轴,y轴偏移30像素值,可以为负值,表示反向偏移: rotate() 定义旋转的函数:定义元素顺时针旋转给…

CSS 2D转换

转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 而2D转换的函数一共分为五大类: translate() 定义位移的函数:其中后面的参数分别是相对x轴,y轴的偏移的距离,单位为像素,形式:translate(30px,30px);表示相对x轴,y轴偏…

CSS 2D转换 matrix() 详解

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

css3学习总结7--CSS3 2D转换

CSS3 转换通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D 转换在本次,您将学到如下 2D 转换方法: 1. translate() 2. rotate() 3. scale() 4. skew() 5. matrix() translate() 方法通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和top(y 坐标) 位置参数: 示例: div { transform: translate(50px,100px)…

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 转换

通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据给定的x坐标和y坐标位置参数,将元素移动到新的位置 rotate(数值deg):元素顺时针旋转给定的角度,允许负值,元素将逆时针旋转. scale(宽度数值,高度数值):元素的尺寸会增加或减少,根据给定的宽度和高度参数. skew(X数值deg,Y数值deg):元素翻转给定的角度,根据给定的X轴和Y轴参数…

css transform 2D3D转换

2D转换 translate 移动 <style> div{ width: 100px; height: 100px; } .box{ border: 1px dashed red; float: left; margin-right: 80px;} .boxs{ background: #ff000061; border: 1px solid #ccc; } .box1{ transform: translateX(50px); } .box2{ transform: translate(2…

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 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…

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=…

css3之2D转换

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

css3学习----transform

css 2D转换…

CSS3 2D转换

CSS3 转换通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是是元素改变形状.尺寸和位置的一种效果. 你可以使用2D或3D转换你的元素. 浏览器支持属性浏览器支持 transform IE10.FireFox以及Opera支持transform属性.Chrome和Safari需要前缀-webkit-. 注释:IE9需要前缀-ms-. 2D转换方法: translate() rotate() scale() skew() matri…

csss3 2D转换

CSS3 转换通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是使元素改变形状.尺寸和位置的一种效果. 您可以使用 2D 或 3D 转换来转换您的元素. 浏览器支持 Internet Explorer 10.Firefox 以及 Opera 支持 transform 属性. Chrome 和 Safari 需要前缀 -webkit-. 注释:Internet Explorer 9 需要前缀 -ms-. 2D 转换在本章中,您将学到如下 2D 转换方法…

CSS属性组-动画、转换、渐变

一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation-timing-function定义动画从一套css样式变为另一套样式的时间,用于使变化平滑(IE9及之前版本不支持) animation-delay规定动画延迟时间 animation-iteration-count规定动画的播放次数 animation-direction规定动画是否逆向播放no…

css3 字体、2D转换、3D转换

学习篇之CSS3 字体.2D转换.3D转换一.字体 @font-face 将字体文件存放到 web 服务器上,通过CSS3 @font-face规则中定义,它会在需要时被自动下载到用户的计算机上. @font-face { font-family: myFonts;//定义字体名称 src: url(myFonts.ttf), url(myFonts.eot), url(myFonts.otf);//字体文件来源可选.ttf..eot..otf等三种格式文件 } PS:为了兼容不同浏览器最好…

HTML CSS3中2D转换、3D转换、过渡效果总结

一.CSS3 2D转换通过 CSS3 转换,我们可以对元素进行移动.缩放.转动.拉长或拉伸. 特别注意,我们在使用css3动画效果时,必须给他们加相应的浏览器前缀,以便浏览器识别,让我们更好的去应用它. 下面我给大家用一个小例子介绍一下各大浏览器的相应前缀: div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9(IE) */ -webkit-transform: rotate(30deg); /* Safar…

background-origin和background-origin和2D转换

1--> background-origin:可以定义背景图片的定位区域,它有3个属性值 background-origin:border-box /padding-box/ content-border; border-box==>背景图片以边框为基准定位 padding-box==>背景图片以padding为区域,或者说以边框内侧为区域定义 content-border==>背景图片以内容区域进行定位 2==> 可以定义背景图片的裁剪区域: background-clip…

css3的2D转换

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

css居中学习笔记

css居中学习笔记一.水平居中以下面的代码为例: <body> <div class="parent"> <div class="child"> hello world ! </div> </div> </body> 方法一:inline-block + text-align <style type="text/css"> body{ margin: 0px;…

css属性之transform

定义和用法 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜. 实例旋转 div 元素: <!DOCTYPE html> <html> <head> <style> div { margin:30px; width:200px; height:100px; background-color:yellow; /* Rotate div */ transform:rotate(9deg); -ms-tra…

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:…

【CSS 3学习——transform 2D转换】的更多相关文章