Css3 Transform

2012-07-04 10:44 BlackBird 阅读(481) 评论(0) 编辑收藏举报

简介

通过对于元素进行transform设置达到一些变形的效果

transform包含以下几种：

n rotate 旋转
n skew 扭曲
n scale缩放
n translate 移动
n matrix 矩阵变换

支持的浏览器

　　目前支持application cache的浏览器如下：

n IE 9+
n Firefox 3.6+
n Chome 17+
n Safari 5+
n Opera1 1.6+
n Android browser 2.1+
n Ios safari 3.2+

语法

标准写法

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

临时写法：

n webkit内核: -webkit-transform

n Mozilla内核: -moz-transform

n Opera内核: -o-transform

n Ms: -ms-tranform

transform-function

属性	参数	描述
translate	(<translation-value>[, <translation-value>])	移动
translateX	(<translation-value>)	沿x轴移动
translateY	(<translation-value>)	沿y轴移动
scale	(<number>[, <number>])	缩放
scaleX	(<number>)	在x轴缩放
skew	(<angle> [, <angle>])	斜切变换
skewX	(<angle>)	沿x轴斜切变换
skewY	(<angle>)	沿Y轴斜切变换
rotate	(<angle>)	旋转角度，正数顺时针
matrix	(<number>, <number>, <number>, <number>, <number>, <number>)	以变换矩阵的形式指定一个2D变换

与transform配套的还有一个transform-origin，不设置的话，转换的中心点在元素的中心。可以通过设置transform-origin来指定一个元素的基点。设置的方式同background-position

Demo

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 基础样式 */
.menu ul {padding: 0 10px;  } 
.menu ul li{list-style: none;} 
.menu ul li a{ color: #fff; float: left; margin: 30px 2px; font-size: 14px; height: 50px; line-height: 50px; text-align: center; width: 200px; padding: 10px 1px; background: #151515; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff; text-shadow: 0 1px 1px #686868; text-decoration: none; } 
.menu ul li a{ background:#999; } 

/* 特性demo */
.menu ul li.translate a:hover { -moz-transform: translate(-10px,-10px); -webkit-transform: translate(-10px,-10px); -o-transform: translate(-10px,-10px); -ms-transform: translate(-10px, -10px); transform: translate(-10px,-10px); }
.menu ul li.translate-x a:hover { -moz-transform: translateX(-10px); -webkit-transform: translateX(-10px); -o-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px);  }
.menu ul li.translate-y a:hover { -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px);  }
.menu ul li.rotate a:hover { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);  }
.menu ul li.scale a:hover { -moz-transform: scale(0.8,0.8); -webkit-transform: scale(0.8,0.8); -o-transform: scale(0.8,0.8); -ms-transform: scale(0.8,0.8); transform: scale(0.8,0.8);  }
.menu ul li.scale-x a:hover { -moz-transform: scaleX(0.8); -webkit-transform: scaleX(0.8); -o-transform: scaleX(0.8); -ms-transform: scaleX(0.8); transform: scaleX(0.8);  }
.menu ul li.scale-y a:hover { -moz-transform: scaleY(1.2); -webkit-transform: scaleY(1.2); -o-transform: scaleY(1.2); -ms-transform: scaleY(1.2); transform: scaleY(1.2);  }
.menu ul li.skew a:hover { -moz-transform: skew(45deg,15deg); -webkit-transform: skew(45deg,15deg); -o-transform: skew(45deg,15deg); -ms-transform: skew(45deg,15deg); transform: skew(45deg,15deg);  }
.menu ul li.skew-x a:hover { -moz-transform: skewX(-30deg); -webkit-transform: skewX(-30deg); -o-transform: skewX(-30deg); -ms-transform: skewX(-30deg); transform: skewX(-30deg);  }
.menu ul li.skew-y a:hover { -moz-transform: skewY(30deg); -webkit-transform: skewY(30deg); -o-transform: skewY(30deg); -ms-transform: skewY(30deg); transform: skewY(30deg);  }
.menu ul li.matrix a:hover { -moz-transform: matrix(1,1,-1,0,0,0); -webkit-transform: matrix(1,1,-1,0,0,0); -o-transform: matrix(1,1,-1,0,0,0); -ms-transform: matrix(1,1,-1,0,0,0); transform: matrix(1,1,-1,0,0,0);  }
</style>
</head>
<body>
<div class="menu"> 
    <ul class="clearfix"> 
      <li class="item translate"><a href="#">translate(-10px,-10px)</a></li> 
      <li class="item translate-x"><a href="#">translateX(-10px)</a></li> 
      <li class="item translate-y"><a href="#">translateY(-10px)</a></li>
      <li class="item rotate"><a href="#">rotate(45deg)</a></li> 
      <li class="item scale"><a href="#">scale(0.8,0.8)</a></li> 
      <li class="item scale-x"><a href="#">scaleX(0.8)</a></li> 
      <li class="item scale-y"><a href="#">scaleY(1.2)</a></li> 
      <li class="item skew"><a href="#">skew(45deg,15deg)</a></li> 
      <li class="item skew-x"><a href="#">skewX(-30deg)</a></li> 
      <li class="item skew-y"><a href="#">skewY(30deg)</a></li> 
      <li class="item matrix"><a href="#">matrix(1,1,-1,0,0,0)</a></li> 
    </ul> 
</div>

</body>
</html>

注意事项

Transform设置多个属性时，属性间用空格隔开

Transform 的本质：我们的任何一个html元素渲染完成后可以得到一张位图，把这张位图上所有的点都做一次矩阵运算，将得到一张的新的位图

html 的结构没有改变依然存在文档流，只是元素的外观被repaint后展示给用户，其他元素的布局不受影响

刷新页面返回顶部

BlackBird

Css3 Transform

简介

支持的浏览器

语法

transform-function

Demo

注意事项

About