代码改变世界

Css3 Transform

2012-07-04 10:44  BlackBird  阅读(480)  评论(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后展示给用户，其他元素的布局不受影响