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. Web页面布局方式小结

    Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.可是这样的主要的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,本文就对这些布局方式做个小结. 1.元素漂 ...

  2. 【巧妙预处理系列+离散化处理】【uva1382】Distant Galaxy

    给出平面上的n个点,找一个矩形,使得边界上包含尽量多的点. [输入格式] 输入的第一行为数据组数T.每组数据的第一行为整数n(1≤n≤100):以下n行每行两个整数,即各个点的坐标(坐标均为绝对值不超 ...

  3. JVM 垃圾回收机制( 一) 回收对象的判定

    关于JVM 的垃圾回收机制,我们一般都没过多深入,因为JAVA 和 C++ 的一个很大区别就是,JAVA 帮我们做了垃圾回收,而不用像C++ 那么样手动进行回收,当然任何自动的东西都存在一定弊端,比如 ...

  4. java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast to javax.servlet.Filter

    java.lang.ClassCastException: org.springframework.web.filter.CharacterEncodingFilter cannot be cast ...

  5. 影响布局的inline-block的空白符的问题

    昨天切页面时,进行布局时,想改变以下方法换换口味,所以就抛弃了float方法,采用了display:inline-block方法,没想到却随之而来的带来了一个想不通的问题,那就是空白.废话不多说,上代 ...

  6. sql 随机数

    select FLOOR(rand()*16) 就是随机得到0到15之间的一个整数 select CEILING(rand()*15) 就是随机得到1到15之间的一个整数 FLOOR()为地板函数,取 ...

  7. [转]标准C++字符串string以及MFC6.0字符串CString的tokenize和split函数

    标准字符串的方法: /******************************************** the tokenize function for std::string ****** ...

  8. JavaScript实现div宽、高自动缓慢拉伸

    最近打算实现一个带有滤镜效果的地自动拉伸图片.发现使用css3浏览器兼容性得需要特别关注.这里我使用js实现了一个div边框自动拉伸和缩小.源码如下: <!DOCTYPE html>< ...

  9. JS面向对象编程之：封装、继承、多态

    最近在实习公司写代码,被隔壁的哥们吐槽说,代码写的没有一点艺术.为了让我的代码多点艺术,我就重新温故了<javascript高级程序设计>(其中几章),然后又看了<javascrip ...

  10. MYSQL 的 6 个返回时间日期函数

    方法1. curdate(),curtime(),now() 方法2. utc_date(),utc_time(),utc_datetime(); 可以看到utc时间相比东西八区要小8小时 注意. 返 ...