Web速查-索引

transform-origin

定义

transform-Origin属性允许更改转换元素的位置。

注意:2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。使用此属性必须先使用transform 属性。

语法

transform-origin: x-axis y-axis z-axis;

属性值

说明
x-axis 定义视图被置于 X 轴的何处。可能的值:left、center、right、length、%
y-axis 定义视图被置于 Y 轴的何处。可能的值:top、center、bottom、length、%
z-axis 定义视图被置于 Z 轴的何处。可能的值:length

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 50px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: green;
transform: rotate(45deg);
transform-origin:20% 40%;
/* IE 9 */
-ms-transform: rotate(45deg);
/* IE 9 */
-ms-transform-origin:20% 40%;
/* Safari and Chrome */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
-webkit-transform-origin:20% 40%;
/* Firefox */
-moz-transform: rotate(45deg);
/* Firefox */
-moz-transform-origin:20% 40%;
}
</style>
<script>
function changeRot(value)
{
document.getElementById('div2').style.transform="rotate(" + value + "deg)";
document.getElementById('div2').style.msTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.webkitTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.MozTransform="rotate(" + value + "deg)";
document.getElementById('div2').style.OTransform="rotate(" + value + "deg)";
document.getElementById('persp').innerHTML=value + "deg";
}
function changeOrg()
{
var x=document.getElementById('ox').value;
var y=document.getElementById('oy').value;
document.getElementById('div2').style.transformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.msTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '%';
document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '%';
document.getElementById('origin').innerHTML=x + "% " + y + "%";
}
</script>
</head>
<body>
<p>尝试通过改变x,y,z轴改变绿色区块</p>
<div id="div1">
<div id="div2">1</div>
</div>
Rotate:
<input type="range" min="-360" max="360" value="45" onchange="changeRot(this.value)" />
transform: rotateY:(<span id="persp">45deg</span>);
<br><br>
X-axis:<input type="range" min="-100" max="200" value="20" onchange="changeOrg()" id="ox" /><br>
Y-axis:<input type="range" min="-100" max="200" value="40" onchange="changeOrg()" id="oy" />
transform-origin: <span id="origin">20% 40%</span>;
</body>
</html>

尝试通过改变x,y,z轴改变绿色区块

1
Rotate: transform: rotateY:(45deg);

X-axis:
Y-axis: transform-origin: 20% 40%;

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
4.0 12.0 10.0 10.0