CSS transform-origin 属性

CSS transform-origin 属性让你更改一个元素变形的原点。


实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #div1
  6. {
  7. position: relative;
  8. height: 200px;
  9. width: 200px;
  10. margin: 100px;
  11. padding:10px;
  12. border: 1px solid black;
  13. }
  14. #div2
  15. {
  16. padding:50px;
  17. position: absolute;
  18. border: 1px solid black;
  19. background-color: yellow;
  20. transform: rotate(45deg);
  21. transform-origin:20% 40%;
  22. -ms-transform: rotate(45deg); /* IE 9 */
  23. -ms-transform-origin:20% 40%; /* IE 9 */
  24. -webkit-transform: rotate(45deg); /* Safari and Chrome */
  25. -webkit-transform-origin:20% 40%; /* Safari and Chrome */
  26. -moz-transform: rotate(45deg); /* Firefox */
  27. -moz-transform-origin:20% 40%; /* Firefox */
  28. -o-transform: rotate(45deg); /* Opera */
  29. -o-transform-origin:20% 40%; /* Opera */
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div id="div1">
  35. <div id="div2">HELLO</div>
  36. </div>
  37. </body>
  38. </html>

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit-、-moz- 或 -ms- 的数字表示使用前缀的首个版本。

属性
transform-origin(二值语法)36.04.0 -webkit-10.09.0 -ms-16.03.5 -moz-9.03.2 -webkit-23.015.0 -webkit-10.5 -o-
transform-origin(三值语法)36.012.0 -webkit-10.016.010.0 -moz-9.04.0 -webkit-23.015.0 -webkit-

定义和用法

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

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

为了更好地理解 transform-origin 属性,请查看这个演示

Safari/Chrome 用户:为了更好地理解 transform-origin 属性用于 3D 转换的情况,请查看这个演示

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

默认值: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

分类导航