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

CSS3 transform-origin属性


定义

CSS3的transform-origin属性指定变形的起点。


语法

transform-origin: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

取值

  • transform-origin:初始值:50% 50%。第一个值是水平值,第二个值是垂直值。

说明

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

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

兼容性

CSS3 Firefox 3.5, Safari 4, Chrome 2.0

示例

源代码如下:

<!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-origin属性示例-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);
  -moz-transform-origin:20% 60%;
  -webkit-transform-origin:20% 60%;
}
</style>
</head>
<body>
<h1>CSS3 transform-origin属性示例</h1>
<p><img class="transform" src="append/20111104.jpg" width="240" height="179" /></p>
</body>
</html>

CSS3 transform-origin属性示例

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