如何在 CSS 中为元素设置旋转点？答案

【问题标题】：How can I set a rotation point for an element in CSS?如何在 CSS 中为元素设置旋转点？
【发布时间】：2011-10-02 21:47:15
【问题描述】：

是否可以在 CSS 中设置旋转点？默认旋转点在 50%、50%。我试过了：

transform: rotate(230deg); 
rotation-point:90% 90%;

但它不起作用...有什么建议吗？

【问题讨论】：

【解决方案1】：

这将在元素的左上角设置旋转枢轴点并旋转它：

transform: rotate(-25deg);
transform-origin: 0% 0%;

看一眼.nav_item_txt类：

【讨论】：

【解决方案2】：

使用transform-origin CSS 属性：

.class {
    transform-origin: 0 0;
}

【讨论】：

【解决方案3】：

尝试使用 transform-origin 属性，不支持旋转点...

用于在元素的右上角旋转（包括所有定位）：

-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;

【讨论】：

【解决方案4】：

只需转到http://www.w3schools.com/cssref/css3_pr_rotation-point.asp 并仔细阅读。它说主流浏览器都不支持这个属性。

【讨论】：