【css3之2D 转换】的更多相关文章

css3之2D转换

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

css3的2D转换

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

我最喜欢用的css3之2D转换之translate用法

CSS3 2D 转换 div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ } translate() 方法 通过 tr…

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

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

CSS3的2D 转换——旋转，缩放，translate()，skew()，matrix()

2D转换方法:在平面对元素进行旋转,缩放,移动,拉伸. ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持:   ⑵在编辑代码的时候要注明用哪种浏览器打开,在前面加上前缀,下面是编辑器的简写形式,以及前缀名:    ㈡ transform 属性 ⑴rotate()   进行旋转的函数 ⑵scale()    进行缩放的函数   ㈢旋转   transform:rotate() ⑴rotate函数可以设置旋转的角度,在括号里带有的参数,就是它的角度,单位是deg(degree),设置角度的值,可以是正…

css3之2D 转换

浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Chrome 和 Safari 要求前缀 -webkit- 版本.Internet Explorer 10, Firefox, 和 Opera支持transform 属性. 注意: Internet Explorer 9 要求前缀 -ms- 版本. rotate() 方法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允…

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学习总结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)…

CSS笔记（十二）CSS3之2D和3D转换

参考:http://www.w3school.com.cn/css3/css3_2dtransform.asp 2D Transform 方法 函数 描述 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素. translateX(n) 定义 2D 转换,沿着 X 轴移动元素. translateY(n) 定义 2D 转换,沿着 Y 轴移动元素. scale(x,y) 定义 2D 缩放转换,改…

CSS3 2D转换

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