旋转块元素[重复]答案

【问题标题】：Rotate a block element [duplicate]旋转块元素[重复]
【发布时间】：2014-02-03 20:08:26
【问题描述】：

是否可以相对于该几何中心旋转由块元素生成的块级框。例如。如下：

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/transform

标签： html css

【解决方案1】：

你可以使用 CSS transform:

transform: rotate(-200deg);
-ms-transform: rotate(-200deg); /* IE 9 */
-webkit-transform: rotate(-200deg); /* Safari and Chrome */

Demo

Internet Explorer 10、Firefox 和 Opera 支持 transform 属性。您不需要为这些使用 CSS 前缀。

【讨论】：

【解决方案2】：

 -moz-transform: rotate(30deg);
 -o-transform: rotate(30deg);
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);

【讨论】：

【解决方案3】：

CSS3 中的属性transform 就是这样做的。您需要为某些浏览器使用供应商前缀。这是一个例子：http://jsfiddle.net/gfEL5/

-moz-transform: rotate(30deg); /* FF after 3 and before 16 */
-ms-transform: rotate(30deg); /* IE 9 */
-o-transform: rotate(30deg); /* Opera after 10.5 and before 12 */
-webkit-transform: rotate(30deg); /* current Chrome, Safari, Opera */ 
transform: rotate(30deg); /* IE after 10, FF after 16 */

默认情况下它围绕中心旋转，但您也可以设置另一个transform-origin。更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/transform

【讨论】：