如何用CSS3做一个旋转角度的模块

如何用CSS3做一个旋转角度的模块

CSS3出现在大家的视野中后出现了很多优美而创新的UI设计，下面为大家分享下如何实现旋转一定角度的设计。

一般的模块都是方方正正的，将一个模块旋转一定角度，让其具被独有的风格，是现代互联网中不可或缺的功能，具体如何实现呢？

我们用一个DIV来做这个将要演示的模块，在页面中添加一个DIV，里面写上一些文字。

为了便于观察我们设置上背景色和边框，样式和代码如下：

.trans

{

width:400px;

height:300px;

background-color:#FFA;

border:1px solid black;

}

旋转模块

transform:rotate(-5deg);

支持IE

-ms-transform:rotate(30deg); /* IE 9 */

支持火狐

-moz-transform:rotate(30deg); /* Firefox */

支持谷歌和苹果

-webkit-transform:rotate(30deg); /* Safari and Chrome */

支持Opera

-o-transform:rotate(30deg); /* Opera */