CSS3 转换

通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

它如何工作？

转换是使元素改变形状、尺寸和位置的一种效果。

您可以使用 2D 或 3D 转换来转换您的元素。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 需要前缀 -ms-。

2D 转换

在本章中，您将学到如下 2D 转换方法：

  • 1. translate()
  • 2. rotate()
  • 3. scale()
  • 4. skew()
  • 5. matrix()

1.translate() 方法

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

示例：

  1. div
  2. {
  3. transform: translate(50px,100px);
  4. -ms-transform: translate(50px,100px); /* IE 9 */
  5. -webkit-transform: translate(50px,100px); /* Safari and Chrome */
  6. -o-transform: translate(50px,100px); /* Opera */
  7. -moz-transform: translate(50px,100px); /* Firefox */
  8. }

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
   <div>
       你好。这是一个 div 元素。
   </div>
   <div id="div2">
       你好。这是一个 div 元素。
   </div>
</body>
</html>

CSS：

div
{
   width:100px;
   height:75px;
   background-color:yellow;
   border:1px solid black;
}
div#div2
{
   transform:translate(50px,100px);
   -ms-transform:translate(50px,100px); /* IE 9 */
   -moz-transform:translate(50px,100px); /* Firefox */
   -webkit-transform:translate(50px,100px); /* Safari and Chrome */
   -o-transform:translate(50px,100px); /* Opera */
}

html一样，css只写改变的样式

2.rotate() 方法

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

实例

  1. div
  2. {
  3. transform: rotate(30deg);
  4. -ms-transform: rotate(30deg); /* IE 9 */
  5. -webkit-transform: rotate(30deg); /* Safari and Chrome */
  6. -o-transform: rotate(30deg); /* Opera */
  7. -moz-transform: rotate(30deg); /* Firefox */
  8. }

值 rotate(30deg) 把元素顺时针旋转 30 度。
div#div2
{
   transform:rotate(30deg);
   -ms-transform:rotate(30deg); /* IE 9 */
   -moz-transform:rotate(30deg); /* Firefox */
   -webkit-transform:rotate(30deg); /* Safari and Chrome */
   -o-transform:rotate(30deg); /* Opera */
}

3.scale() 方法

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

示例代码：

  1. div
  2. {
  3. transform: scale(2,4);
  4. -ms-transform: scale(2,4); /* IE 9 */
  5. -webkit-transform: scale(2,4); /* Safari 和 Chrome */
  6. -o-transform: scale(2,4); /* Opera */
  7. -moz-transform: scale(2,4); /* Firefox */
  8. }

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
div#div2
{
  margin:100px;
  transform:scale(2,4);
  -ms-transform:scale(2,4); /* IE 9 */
  -moz-transform:scale(2,4); /* Firefox */
  -webkit-transform:scale(2,4); /* Safari and Chrome */
  -o-transform:scale(2,4); /* Opera */
}

4.skew() 方法

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

示例代码

  1. div
  2. {
  3. transform: skew(30deg,20deg);
  4. -ms-transform: skew(30deg,20deg); /* IE 9 */
  5. -webkit-transform: skew(30deg,20deg);/* Safari and Chrome */
  6. -o-transform: skew(30deg,20deg); /* Opera */
  7. -moz-transform: skew(30deg,20deg); /* Firefox */
  8. }

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

div#div2
{
   transform:skew(30deg,20deg);
   -ms-transform:skew(30deg,20deg); /* IE 9 */
   -moz-transform:skew(30deg,20deg); /* Firefox */
   -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
   -o-transform:skew(30deg,20deg); /* Opera */
}

5.matrix() 方法

matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

示例代码

如何使用 matrix 方法将 div 元素旋转 30 度：

  1. div
  2. {
  3. transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  4. -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
  5. -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
  6. -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
  7. -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
  8. }

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 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。

csss3 2D转换的更多相关文章

  1. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

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

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  3. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

  4. CSS3 2D 转换

    2D 转换 在本章中,您将学到如下 2D 转换方法: translate() rotate() scale() skew() matrix() 您将在下一章学习 3D 转换. 实例 div { tra ...

  5. css3的2D转换

    CSS3的2D转换用transform来实现 1.rotate()   /*通过 rotate() 方法,元素顺时针旋转给定的角度.允许负值,元素将逆时针旋转.*/ 2.scal()   /*通过 s ...

  6. CSS 2D转换 matrix() 详解

    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...

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

    CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D 转换 在本次,您将学到如下 2D 转换方法: 1. translate() 2. rotate() 3. ...

  8. css3学习笔记之2D转换

    translate() 方法 translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  9. CSS3 2D转换

    CSS3 转换 通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 它如何工作? 转换是是元素改变形状.尺寸和位置的一种效果. 你可以使用2D或3D转换你的元素. 浏览器支持 属性 浏 ...

随机推荐

  1. Gridview 多重表头 (二)

    多重表头之排序 这是个有点忧桑的故事...Cynthia告诉我,研究一个问题,我们不可能有超过一天的时间... 结果好好几天过去鸟~~还没有完成... 由于不再使用Gridview自带的表头行,于是无 ...

  2. css之background的cover和contain的缩放背景图

    对于这两个属性,官网是这样解释的: contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小. 等比例缩放图象到垂直或者水平其中一项填满区域. cover 此时会保持图像的纵横 ...

  3. material design 图标制作参数

    可用图标的标准不透明度在亮色背景上是54%(#000000).可视等级较低的禁用图标的不透明度应为 26%(#000000). 可用图标的标准不透明度在暗色背景上是 100%(#FFFFFF).可视等 ...

  4. log4net使用简介

    平常我们在开发网站时,有一些比较重要的地方需要添加日志记录.一般日志记录分为两种:1)在数据库中添加一张日志表,用来记录用户操作并给用户提醒(用户可以看到). 2)在系统中添加一个日志文件,用来记录一 ...

  5. Android系统休眠对程序的影响以及处理

    Android系统在用户长时间不操作时,为了节省资源,系统会选择休眠.在休眠过程中自定义的Timer.Handler.Thread.Service等都会暂停.而有时候这种机制会影响到我们程序的正常运行 ...

  6. SQL Performance Improvement Techniques（转）

    原文地址:http://www.codeproject.com/Tips/1023621/SQL-Performance-Improvement-Techniques This article pro ...

  7. OpenLayers加载QQ地图(转)

    OpenLayers加载QQ地图 http://www.openlayers.cn/portal.php?mod=view&aid=4 2012-10-21 17:22| 发布者: admin ...

  8. [Math]Divide Two Integers

    otal Accepted: 54356 Total Submissions: 357733 Difficulty: Medium Divide two integers without using ...

  9. JAVA多线程下，获取递增的序列号

    场景描述: 1,目前我们的系统可以简单归纳成MVC的架构模式 2,每个前端的请求过来,都会在C层开启事务,最后处理结束后,也在在C层关闭事务(实际是在C层的底层统一做了事务的开启和提交):      ...

  10. spring:ContextLoaderListener接口

    在启动Web容器时,自动装配Spring applicationContext.xml的配置信息. 因为它实现了ServletContextListener这个接口,在web.xml配置这个监听器,启 ...