transform-origin属性用于改变被转换元素的位置。在2d 转换元素中可以改变元素 x 和 y 轴的位置；3d 转换元素中还可以改变其 z 轴的位置。
css3 transform-origin属性
作用：transform-origin 属性允许您改变被转换元素的位置。2d 转换元素能够改变元素 x 和 y 轴。3d 转换元素还能改变其 z 轴。
语法：
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
注：该属性必须与 transform 属性一同使用。
css3 transform-origin属性的使用示例
<!doctype html><html><head><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: red;transform: rotate(45deg);transform-origin:20% 40%;-ms-transform: rotate(45deg); /* ie 9 */-ms-transform-origin:20% 40%; /* ie 9 */-webkit-transform: rotate(45deg); /* safari and chrome */-webkit-transform-origin:20% 40%; /* safari and chrome */-moz-transform: rotate(45deg); /* firefox */-moz-transform-origin:20% 40%; /* firefox */-o-transform: rotate(45deg); /* opera */-o-transform-origin:20% 40%; /* opera */}</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>旋转红色的div元素，尝试更改其x轴和y轴：</p><div id="div1"> <div id="div2">hello</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>
效果图：
以上就是transform-origin属性怎么用的详细内容。