CSS3 transform-origin 属性

实例

设置旋转元素的基点位置：

  1. div
  2. {
  3. transform: rotate(45deg);
  4. transform-origin:20% 40%;
  5.  
  6. -ms-transform: rotate(45deg);         /* IE 9 */
  7. -ms-transform-origin:20% 40%;         /* IE 9 */
  8.  
  9. -webkit-transform: rotate(45deg);    /* Safari 和 Chrome */
  10. -webkit-transform-origin:20% 40%;    /* Safari 和 Chrome */
  11.  
  12. -moz-transform: rotate(45deg);        /* Firefox */
  13. -moz-transform-origin:20% 40%;        /* Firefox */
  14.  
  15. -o-transform: rotate(45deg);        /* Opera */
  16. -o-transform-origin:20% 40%;        /* Opera */
  17. }

页面底部有更多实例。

浏览器支持


IE Firefox Chrome Safari Opera
ie firefox chrome safari opera

Internet Explorer 10、Firefox、Opera 支持 transform-origin 属性。

Internet Explorer 9 支持替代的 -ms-transform-origin 属性（仅适用于 2D 转换）。

Safari 和 Chrome 支持替代的 -webkit-transform-origin 属性（3D 和 2D 转换）。

Opera 只支持 2D 转换。

定义和用法

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

为了更好地理解 transform-origin 属性，请看这个实例。

  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <style>
  7. h1
  8. {
  9. font-family:'微软雅黑';
  10. }
  12. p {
  13. font-size:14px;
  14. font-family:Verdana, Arial, Helvetica, sans-serif;
  15. }
  17. #div1
  18. {
  19. position: relative;
  20. height: 200px;
  21. width: 200px;
  22. margin: 50px;
  23. padding:10px;
  24. border: 1px solid black;
  25. }
  27. #div2
  28. {
  29. padding:50px;
  30. position: absolute;
  31. border: 1px solid black;
  32. background-color: yellow;
  33. transform: rotate(45deg);
  34. transform-origin:20% 40%;
  35. -ms-transform: rotate(45deg); /* IE 9 */
  36. -ms-transform-origin:20% 40%; /* IE 9 */
  37. -webkit-transform: rotate(45deg); /* Safari and Chrome */
  38. -webkit-transform-origin:20% 40%; /* Safari and Chrome */
  39. -moz-transform: rotate(45deg); /* Firefox */
  40. -moz-transform-origin:20% 40%; /* Firefox */
  41. -o-transform: rotate(45deg); /* Opera */
  42. -o-transform-origin:20% 40%; /* Opera */
  43. }
  44. </style>
  46. <script>
  47. function changeRot(value)
  48. {
  49. document.getElementById('div2').style.transform="rotate(" + value + "deg)";
  50. document.getElementById('div2').style.msTransform="rotate(" + value + "deg)";
  51. document.getElementById('div2').style.webkitTransform="rotate(" + value + "deg)";
  52. document.getElementById('div2').style.MozTransform="rotate(" + value + "deg)";
  53. document.getElementById('div2').style.OTransform="rotate(" + value + "deg)";
  54. document.getElementById('persp').innerHTML=value + "deg";
  55. }
  57. function changeOrg()
  58. {
  59. var x=document.getElementById('ox').value;
  60. var y=document.getElementById('oy').value;
  61. document.getElementById('div2').style.transformOrigin=x + '% ' + y + '%';
  62. document.getElementById('div2').style.msTransformOrigin=x + '% ' + y + '%';
  63. document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '%';
  64. document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '%';
  65. document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '%';
  66. document.getElementById('origin').innerHTML=x + "% " + y + "%";            
  67. }
  68. </script>
  69. </head>
  71. <body>
  72. <h1>transform-origin 属性演示</h1>
  74. <p>旋转这个黄色的 div 元素，试着改变 X 轴和 Y 轴的参数：</p>
  76. <div id="div1">
  77.   <div id="div2">HELLO</div>
  78. </div>
  80. <p style="margin-bottom:50px;">
  81. 旋转：
  82. <br /><input type="range" min="-360" max="360" value="45" onChange="changeRot(this.value)" /><br />
  83. transform: rotateY:(<span id="persp">45deg</span>);
  84. </p>
  86. <p>
  87. X 轴：
  88. <br /><input type="range" min="-100" max="200" value="20" onChange="changeOrg()" id="ox" /><br />
  89. Y 轴：
  90. <br /><input type="range" min="-100" max="200" value="40" onChange="changeOrg()" id="oy" /><br />
  91. transform-origin: <span id="origin">20% 40%</span>;
  92. </p>
  94. </body>
  95. </html>

Safari/Chrome 用户：为了更好地理解 transform-origin 属性用于 3D 转换的情况，请看这个实例。

  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <style>
  7. h1
  8. {
  9. font-family:'微软雅黑';
  10. }
  12. p {
  13. font-size:14px;
  14. font-family:Verdana, Arial, Helvetica, sans-serif;
  15. }
  17. #div1
  18. {
  19. position: relative;
  20. height: 200px;
  21. width: 200px;
  22. margin: 50px;
  23. padding:10px;
  24. border: 1px solid black;
  25. }
  27. #div2
  28. {
  29. padding:50px;
  30. position: absolute;
  31. border: 1px solid black;
  32. background-color: yellow;
  33. transform: rotateY(70deg);
  34. transform-origin:50% 50% 100px;
  35. -webkit-transform: rotateY(70deg); /* Safari and Chrome */
  36. -webkit-transform-origin:50% 50% 100px; /* Safari and Chrome */
  37. -moz-transform: rotateY(70deg); /* Firefox */
  38. -moz-transform-origin:50% 50% 100px; /* Firefox */
  39. -o-transform: rotateY(70deg); /* Opera */
  40. -o-transform-origin:50% 50% 100px; /* Opera */
  41. }
  42. </style>
  43. <script>
  44. function changeRot(value)
  45. {
  46. document.getElementById('div2').style.transform="rotateY(" + value + "deg)";
  47. document.getElementById('div2').style.webkitTransform="rotateY(" + value + "deg)";
  48. document.getElementById('div2').style.MozTransform="rotateY(" + value + "deg)";
  49. document.getElementById('div2').style.OTransform="rotateY(" + value + "deg)";
  50. document.getElementById('persp').innerHTML=value + "deg";
  51. }
  53. function changeOrg()
  54. {
  55. var x=document.getElementById('ox').value;
  56. var y=document.getElementById('oy').value;
  57. var z=document.getElementById('oz').value;
  58. document.getElementById('div2').style.transformOrigin=x + '% ' + y + '% ' + z + 'px';
  59. document.getElementById('div2').style.webkitTransformOrigin=x + '% ' + y + '% ' + z + 'px';
  60. document.getElementById('div2').style.MozTransformOrigin=x + '% ' + y + '% ' + z + 'px';
  61. document.getElementById('div2').style.OTransformOrigin=x + '% ' + y + '% ' + z + 'px';
  62. document.getElementById('origin').innerHTML=x + "% " + y + "% " + z + "px";            
  63. }
  64. </script>
  65. </head>
  67. <body>
  68. <h1>transform-origin 属性演示（适用于 Safari/Chrome）</h1>
  70. <p>旋转这个黄色的 div 元素，试着改变 X 轴、Y 轴和 Z 轴的参数：</p>
  72. <div id="div1">
  73.   <div id="div2">HELLO</div>
  74. </div>
  76. <p>
  77. 旋转：
  78. <br /><input type="range" min="-360" max="360" value="70" onChange="changeRot(this.value)" /><br />
  79. -webkit-transform: rotateY:(<span id="persp">70deg</span>);
  80. </p>
  82. <p>
  83. X 轴：
  84. <br /><input type="range" min="-100" max="200" value="50" onChange="changeOrg()" id="ox" /><br />
  85. Y 轴：
  86. <br /><input type="range" min="-100" max="200" value="50" onChange="changeOrg()" id="oy" /><br />
  87. Z 轴：
  88. <br /><input type="range" min="-100" max="200" value="100" onChange="changeOrg()" id="oz" /><br />
  89. -webkit-transform-origin: <span id="origin">50% 50% 100px</span>;
  90. </p>
  92. </body>
  93. </html>

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

为了更好地理解 transform 属性，请看这个实例。

  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6. <style> 
  7. p {
  8. font-size:14px;
  9. font-family:Verdana, Arial, Helvetica, sans-serif;
  10. }
  12. #div1
  13. {
  14. width:120px;
  15. height:100px;
  16. background-color:yellow;
  17. border:1px solid black;
  18. -ms-transform:rotate(7deg); /* Firefox */
  19. -moz-transform:rotate(7deg); /* Firefox */
  20. -webkit-transform:rotate(7deg); /* Safari and Chrome */
  21. -o-transform:rotate(7deg); /* Safari and Chrome */
  22. transform:rotate(7deg);
  23. }
  24. </style>
  26. <script>
  27. function rotate(value)
  28. {
  29. document.getElementById('div1').style.webkitTransform="rotate(" + value + "deg)";
  30. document.getElementById('div1').style.msTransform="rotate(" + value + "deg)";
  31. document.getElementById('div1').style.MozTransform="rotate(" + value + "deg)";
  32. document.getElementById('div1').style.OTransform="rotate(" + value + "deg)";
  33. document.getElementById('div1').style.transform="rotate(" + value + "deg)";
  34. document.getElementById('span1').innerHTML=value + "deg";
  35. }
  36. </script>
  38. </head>
  39. <body>
  41. <p>请旋转这个黄色的 div 元素：</p>
  43. <div id="div1">HELLO</div>
  45. <p>
  46. 旋转：
  47. <br /><input type="range" min="-360" max="360" value="7" onchange="rotate(this.value)" /><br />
  48. transform: rotate(<span id="span1">7deg</span>);
  49. </p>
  51. </body>
  52. </html>
默认值： 50% 50% 0
继承性： no
版本： CSS3
JavaScript 语法： object.style.transformOrigin="20% 40%"

语法

  1. 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

相关页面

CSS3 教程：CSS3 2D 转换

CSS3 教程：CSS3 3D 转换