www.baike369.com
百科369 > CSS3教程 > CSS3 transform属性

CSS3 transform属性


定义

CSS3的transform属性允许元素以不同的方式偏移、旋转、缩放和编辑。


语法

transform:none | <transform-function> [ <transform-function> ]*

取值

  • none:指定一个身份转变。
  • matrix(<number>, <number>, <number>, <number>, <number>, <number>):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵。
  • translate(<translation-value>[, <translation-value>]):通过矢量[tx, ty]指定一个2D translation,tx 是第一个过渡值参数,ty 是第二个过渡值参数选项。如果<ty>未被提供,则ty以0作为其值。
  • translateX(<translation-value>):通过给定一个X方向上的数目指定一个translation。
  • translateY(<translation-value>):通过给定Y方向的数目指定一个translation。
  • scale(<number>[, <number>]):提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值。
  • scaleX(<number>):使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。
  • scaleY(<number>):使用 [i,sy] 缩放矢量执行缩放操作,sy为所需参数。
  • rotate(<angle>):通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。
  • skewX(<angle>):按给定的角度沿X轴指定一个skew transformation(斜切变换)。
  • skewY(<angle>):按给定的角度沿Y轴指定一个skew transformation(斜切变换)。
  • skew(<angle> [, <angle>]):X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切。

说明

应用于block水平和inline水平的元素。

引擎类型 Gecko Webkit Presto
transform -moz-transform -webkit-transform  
浏览器 Firefox Safari、Chrome  

兼容性

CSS3 Firefox 3.5, Safari 4, Chrome 2.0, Opera 10.5

示例

源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3 transform属性示例-www.baike369.com</title>
<style type="text/css">
body{margin:100px;}
.transform{
    -moz-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px); 
    -webkit-transform:translate(-10px,-20px) scale(0.8) rotate(45deg) translate(20px,30px);
}
</style>
</head>
<body>
<h1>CSS3 transform属性示例</h1>
<p><img class="transform" src="append/20111104.jpg" width="240" height="179" /></p>
</body>
</html>

CSS3 transform属性示例

Copyright© 2011-2016 www.baike369.com All Rights Reserved