html5中旋转块级元素的简单小方法

来源：互联网发布：java输出1到100的素数编辑：程序博客网时间：2024/05/31 13:16

在写html5网页时会遇到需要在块级元素中倾斜的字体或需要插入倾斜的图片，初学者（比如我）往往希望利用最少的代码来实现这个功能，现给大家分享一种代码拿去就可以用的简单方法。

举例代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">     *{     margin: 0;     padding: 0;     }div{               width:200px;               height:100px;               background-color:aqua;               /* Rotate div */               transform-origin:0px 0px;               transform:rotate(45deg);               -webkit-transform:rotate(45deg); /* Safari 和 Chrome */               -o-transform:rotate(45deg); /* Opera */               -ms-transform:rotate(45deg); /* Internet Explorer */               -moz-transform:rotate(45deg); /* Firefox */}</style></head><body><div>That's great!</div></body></html>

这段代码就是将一个长宽各为50px的块元素绕着距离浏览器原点为（0px 0px）的位置旋转45度，产生效果如下：

问题一：这段代码有什么作用？

*{     margin: 0;     padding: 0;     }

答案：这是利用通配选择器设置全局代码，默认情况下浏览器布局页面跟浏览器原点（左上角）有一定的距离，使用此段代码可以清除这些距离，在这里使用是为了方便观察旋转行为。

问题二：transform-origin:0px 0px;有什么作用？

答案：从翻译就可以看出来，这段代码是设置旋转中心位置的，没有这段代码情况下，元素默认的旋转中心是其块的中心，后面两个数字分别是相对浏览器左上角原点的坐标，向右为X轴正方向，向下为Y轴正方向。

问题三：transform：rotate(45deg)的解释？

答案：transform：ratate是调用旋转功能，45deg表示旋转45度，顺时针为正，逆时针为负。

问题四：

               -webkit-transform:rotate(45deg); /* Safari 和 Chrome */               -o-transform:rotate(45deg); /* Opera */               -ms-transform:rotate(45deg); /* Internet Explorer */               -moz-transform:rotate(45deg); /* Firefox */

以上这段代码分别起什么作用？

答案：从后面注释就可以看出这行代码分别针对四类型浏览器的能否实现这种功能而写的，一般代码需要在不同浏览器中运行，存在不同浏览器有不识别一些代码的情况，这就需要把这些代码都附上便于起作用。如下图所示，通过火狐浏览器查看元素可以发现，真正起作用的只有-moz-transform:rotate(45deg);这段代码。

说了这么多废话，可以看出真正起旋转作用的也就是以下这段代码了，设置好旋转点坐标和旋转度数，放到你的块元素样式中，即可实现简单块中图片或文本的的旋转咯！

 transform-origin:0px 0px;transform:rotate(45deg);-webkit-transform:rotate(45deg); /* Safari 和 Chrome */ -o-transform:rotate(45deg); /* Opera */ -ms-transform:rotate(45deg); /* Internet Explorer */-moz-transform:rotate(45deg); /* Firefox */

1 0