transform-origin属性怎么用

　　CSS3transform-origin属性

　　作用：transform-origin属性允许您改变被转换元素的位置。2D转换元素能够改变元素x和y轴。3D转换元素还能改变其Z轴。

　　语法：

　　transform-origin:x-axisy-axisz-axis;

　　值

　　描述

　　x-axis

　　定义视图被置于X轴的何处。可能的值：

　　●left

　　●center

　　●right

　　●length

　　●%

　　y-axis

　　定义视图被置于Y轴的何处。可能的值：

　　●top

　　●center

　　●bottom

　　●length

　　●%

　　z-axis 定义视图被置于Z轴的何处。可能的值：length

　　注：该属性必须与transform属性一同使用。

　　CSS3transform-origin属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　#div1

　　{

　　position:relative;

　　height:200px;

　　width:200px;

　　margin:50px;

　　padding:10px;

　　border:1pxsolidblack;

　　}

　　#div2

　　{

　　padding:50px;

　　position:absolute;

　　border:1pxsolidblack;

　　background-color:red;

　　transform:rotate(45deg);

　　transform-origin:20%40%;

　　-ms-transform:rotate(45deg);/*IE9*/

　　-ms-transform-origin:20%40%;/*IE9*/

　　-webkit-transform:rotate(45deg);/*SafariandChrome*/

　　-webkit-transform-origin:20%40%;/*SafariandChrome*/

　　-moz-transform:rotate(45deg);/*Firefox*/

　　-moz-transform-origin:20%40%;/*Firefox*/

　　-o-transform:rotate(45deg);/*Opera*/

　　-o-transform-origin:20%40%;/*Opera*/

　　}

　　</style>

　　functionchangeRot(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";

　　}

　　functionchangeOrg()

　　{

　　varx=document.getElementById('ox').value;

　　vary=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>

　　<divid="div1">

　　<divid="div2">HELLO</div>

　　</div>

　　Rotate:

　　<inputtype="range"min="-360"max="360"value="45"onchange="changeRot(this.value)"/>

　　transform:rotateY:(<spanid="persp">45deg</span>);

　　X-axis:<inputtype="range"min="-100"max="200"value="20"onchange="changeOrg()"id="ox"/><br>

　　Y-axis:<inputtype="range"min="-100"max="200"value="40"onchange="changeOrg()"id="oy"/>

　　transform-origin:<spanid="origin">20%40%</span>;

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56242.shtml