旋转块元素

Question

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

Answer 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前缀。

Answer 2

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

Answer 3

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