CSS3transform-origin轉(zhuǎn)換
此屬性用來設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置。
語法結(jié)構(gòu):?
transform-origin: x y z;
參數(shù)解析:
1.x:規(guī)定元素旋轉(zhuǎn)基點(diǎn)的x軸坐標(biāo)，屬性值可以是left、center、right、length和%。
2.y:規(guī)定元素旋轉(zhuǎn)基點(diǎn)的y軸坐標(biāo)，屬性值可以是left、center、right、length和%。
3.z:這個(gè)參數(shù)只有3d旋轉(zhuǎn)的時(shí)候才會(huì)用到，用于規(guī)定元素旋轉(zhuǎn)基點(diǎn)的z軸坐標(biāo)，屬性值只能是length。
關(guān)于基點(diǎn)位置:
此屬性的關(guān)鍵是理解什么是基點(diǎn)位置，以何種標(biāo)準(zhǔn)來確定基點(diǎn)位置的坐標(biāo)。
基點(diǎn)位置就是元素旋轉(zhuǎn)時(shí)，所圍繞的軸心位置。
基點(diǎn)位置的坐標(biāo)是以矩形原始左上角為(0,0)位置為參考的，在x軸上向右為正，在y軸上向下為正。
說明:如果不設(shè)置基點(diǎn)位置，那么默認(rèn)狀態(tài)下，基點(diǎn)位置就是元素的中心位置（50% 50% 0）。
圖示如下:
?
代碼實(shí)例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box{
position:relative;
height:200px;
width:200px;
margin-top:150px;
margin-left:150px;
border:1px solid black;
}
#inner{
padding:50px;
position:absolute;
border:1px solid black;
background-color:yellow;
transform:rotate(45deg);
transform-origin:40px 40px;
font-size:12px;
-ms-transform:rotate(45deg); /* IE 9 */
-ms-transform-origin:40px 40px; /* IE 9 */
-webkit-transform:rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:40px 40px; /* Safari and Chrome */
-moz-transform:rotate(45deg); /* Firefox */
-moz-transform-origin:40px 40px;/* Firefox */
-o-transform:rotate(45deg); /* Opera */
-o-transform-origin:40px 40px; /* Opera */
}
table{
font-size:12px;
width:300px;
margin-left:120px;
}
.left{text-align:right}
</style>
<script type="text/javascript">
function changeRot(value){
var oinner=document.getElementById('inner');
var opersp=document.getElementById('persp');
oinner.style.transform="rotate(" + value + "deg)";
oinner.style.msTransform="rotate(" + value + "deg)";
oinner.style.webkitTransform="rotate(" + value + "deg)";
oinner.style.MozTransform="rotate(" + value + "deg)";
oinner.style.OTransform="rotate(" + value + "deg)";
opersp.innerHTML=value + "deg";
}
function changeOrg(){
var ox=document.getElementById('ox');
var oy=document.getElementById('oy');
var oinner=document.getElementById('inner');
var origin=document.getElementById('origin');
var x=ox.value;
var y=oy.value;
oinner.style.transformOrigin = x + 'px ' + y + 'px';
oinner.style.msTransformOrigin = x + 'px ' + y + 'px';
oinner.style.webkitTransformOrigin = x + 'px ' + y + 'px';
oinner.style.MozTransformOrigin = x + 'px ' + y + 'px';
oinner.style.OTransformOrigin = x + 'px ' + y + 'px';
origin.innerHTML = x + "px " + y + "px";
}
window.onload = function () {
var oz = document.getElementById("oz");
var ox = document.getElementById("ox");
var oy = document.getElementById("oy");
oz.onmousemove = function () { changeRot(this.value) }
ox.onmousemove = function () { changeOrg() }
oy.onmousemove = function () { changeOrg() }
}
</script>
</head>
<body>
<div id="box">
<div id="inner">php中文網(wǎng)</div>
</div>
<table>
<tr>
<td class="left">旋轉(zhuǎn):</td>
<td><input type="range" min="-360" max="360" value="45" id="oz"/></td>
</tr>
<tr>
<td class="left">rotateY:</td>
<td>(<span id="persp">45deg</span>)</td>
</tr>
<tr>
<td class="left">X軸:</td>
<td><input type="range" min="-100" max="200" value="40" id="ox"/></td>
</tr>
<tr>
<td class="left">Y軸:</td>
<td><input type="range" min="-100" max="200" value="40" id="oy"/></td>
</tr>
<tr>
<td class="left">origin:</td>
<td><span id="origin">40px 40px</span></td>
</tr>
</table>
</body>
</html>以上代碼可以實(shí)現(xiàn)自動(dòng)調(diào)整參數(shù)進(jìn)行演示效果，應(yīng)該可以總結(jié)出此屬性的用法了。
