transform-origin 属性允许您改变被转换元素的位置。2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。为了更好地理解 transform-origin 属性，请查看这个演示。Safari/Chrome 用户：为了更好地理解 transform-origin 属性用于 3D 转换的情况，请查看这个演示。注释：该属性必须与 transform 属性一同使用。
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>定义菜单旋转的原点</title>
<style type="text/css">
ul {
margin-top:30px;
list-style:none;
line-height:25px;
font-family:Arial;
font-weight:bold;
}
li {
width:120px;
float:left;
margin:2px;
border:1px solid #ccc;
background-color:#e4e4e4;
text-align:left;
}
li a {
display:block;
padding:5px 10px;
color:#333;
text-decoration:none;
-webkit-transform-origin:0 0;
-moz-transform-origin:0 0;
-o-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
}
li:hover {
background-color:#999;
}
li:hover a{
background-color:#f90;
color:#FFF;
-webkit-transform:rotate(30deg);
-moz-transform:rotate(30deg);
-o-transform:rotate(30deg);
-ms-transform:rotate(30deg);
transform:rotate(30deg);
}
</style>
</head>
<body>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</body>
</html>
Processed:
0.017, SQL:
9
