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. 用 oracle vitual box 克隆虚拟机，找不到eth0的解决方案

    用 oracle vitual box 克隆虚拟机 当我们需要使用多台虚拟机的时候,如果一台一台的安装,实在是太过麻烦了.所以一般的虚拟机软件都为我们提供了克隆已有虚拟机状态的功能.Oracle vi ...

  2. node.js实践第二天

    使用Express框架搭建一个网站 1.安装Express 首先要用全局模式安装Express,因为只有这样才能在命令行中使用它.使用下述命令在伪dos命令窗口安装express. $ npm ins ...

  3. javascript 算法

    前段时间学习算法方面的知识看了一下用C语言写的一些简单的算法自己用js模拟实现一遍现在整理出来和大家分享一下. 河内塔 斐波那契数列 巴斯卡三角形 三色棋 河内之塔(Towers of Hanoi)是 ...

  4. 转载 Eclipse下的SSH开发例子

    前言 确实好久没有写过了,一直以来把写博文当作自己学习的总结,当作做过的笔记,随时都可以拿出来看看.不过最近习惯了用OneNote和印象笔记,所以就很少在论坛写博文.但是偶尔看到几篇被转载了,也小小的 ...

  5. Windows Server 2008企业64位版防火墙添加端口的方法

    原始地址:http://www.veryhuo.com/a/view/48280.html 什么是防火墙的入站规则和出站规则 简单的说 出站就是你访问外网 入站就是外网访问你 记得在两年前写过一篇教程 ...

  6. hibernate联合主键注解配置

    在网上看到好多方法,结果拿来用还是出现了一些问题.现在整理一下 1.主键类 import javax.persistence.Column; public class UserRoleUionPK i ...

  7. Gallery过时替代方案HorizontalScrollView

    布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:androi ...

  8. HTML5数组方法

    ***************************** forEach方法 *****************************   <script>var data = [1, ...

  9. php 对数组按某个字段进行排序

    //$arrays 需要排序的数组,$sort_key 需要排序的键名称 function my_sort($arrays,$sort_key,$sort_order=SORT_DESC,$sort_ ...

  10. python文件处理及装饰器

    1.文件处理: Python处理文件的流程比较简单,大致分为以下几个: 打开文件==>处理文件==>生成新文件==>写入文件 先说怎么打开一个文件: 打开一个文件可以有多种写法,下面 ...