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. Identity 验证，Authorize 特性

    多类型角色访问 //[Authorize] //[Authorize(Roles = "User")] //[Authorize(Roles="Administrator ...

  2. Linux下 输入 env 而得到的环境变量解读

    HOSTNAME=Master.Hadoop MAHOUT_HOME=/usr/hadoop/mahout-distribution-0.8 TERM=linux SHELL=/bin/bash HA ...

  3. Android app去应用市场评分功能

    因为android市场很多,去各个应用市场评分的功能却不是很难实现. private void gotoRate(){ Uri uri = Uri.parse("market://detai ...

  4. React-Native之ViewPagerAndroid的使用

    刚接触React-Native不久,我就被深深折服了. 前几天做项目用到了ViewPager做广告页,在研究了一番官方文档之后,终于也是大体做出来了,今天就分享给大家吧. 其实,大家如果使用过Andr ...

  5. Android Bitmap圆角

    代码如下: public Bitmap transform(Bitmap source) { int size = Math.min(source.getWidth(), source.getHeig ...

  6. PHP解决网站高流量高并发问题

    首先,确认服务器硬件是否足够支持当前的流量. 普通的P4服务器一般最多能支持每天10万独立IP,如果访问量比这个还要大, 那么必须首先配置一台更高性能的专用服务器才能解决问题 ,否则怎么优化都不可能彻 ...

  7. Unicode与汉字

    当遇到\u7f3a\u5c11  这样形式的字符串时,其实它代表的是汉字   具体的网上可以进行Unicode转中文   翻译

  8. CodeForces 187A Permutations

    反向思维,先求数组中不用处理的元素个数,再用n减去这个数,得到结果. #include <iostream> #include <cstring> #define maxn 2 ...

  9. Ubuntu10.4 Install DB2V9.5

    1. Download the DB2V9.5 Software from URL:  http://www14.software.ibm.com/webapp/download/search.jsp ...

  10. NetFlow

    供应商 支持的流 设备列表 Cisco NetFlow Cisco - 800.1700.2600.1800.2800.3800.4500.6500.7200.7300.7500.7600.10000 ...