transform-origin属性怎么用

2024-01-17 15:31 小编

        transform-origin属性用于改变被转换元素的位置。在2D转换元素中可以改变元素x和y轴的位置;3D转换元素中还可以改变其Z轴的位置。

 

  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>

 

  <script>

 

  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>);

 

  <br><br>

 

  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>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

内部绝密传真282期

微信二维码