<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>指定變形中心點</title>
<style type="text/css">
/*基本設置*/
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋體";backgorund:#fff;}/*文檔清零,字體,字號,背景設置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*邊界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符號*/
img{border:none;}/*去除圖片按鈕邊框*/
a{text-decoration:none;}/*去除超鏈接下划線*/
img,input,textarea{vertical-align:middle;}
div {
position:absolute;
width:90px;
height:90px;
background-color:#e4105e;
border:2px solid #000000;
margin:30px;
}
div.a {
left:30px;
top:30px;
}
div.b {
left:30px;
top:150px;
}
div.c {
left:30px;
top:270px;
}
</style>
</head>
<body>
<div class="a">為變換之前</div>
<div class="a" style=" background:#b6ff00;
-moz-transform-origin:left top;-moz-transform:rotate(-25deg);
-webkit-transform-origin:left top;-webkit-transform:rotate(-25deg);
-o-transform-origin:left top;-webkit-transform:rotate(-25deg);">左上角為變形中心</div>
<div class="b">為變換之前</div>
<div class="b" style="background:#266c9b;
-moz-transform-origin:right bottom;-moz-transform:rotate(75deg);
-webkit-transform-origin:right bottom;-webkit-transform:rotate(75deg);
-o-transform-origin:right bottom;-webkit-transform:rotate(75deg);">右下角為變形中心</div>
<div class="c">為變換之前</div>
<div class="c" style="background:#ff6a00;
-moz-transform-origin:right center;-moz-transform:rotate(-90deg);
-webkit-transform-origin:right center;-webkit-transform:rotate(-90deg);
-o-transform-origin:right center;-o-transform:rotate(-90deg);
">右邊界中間為變形中心點</div>
</body>
</html>