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

2025-05-17 22:55:00

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

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

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

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

3、为了便于观察我们设置上讳求藜派背景色和边框,样式和代码如下:.trans{width:400px;height:300px;background-color:#FFA;border:1px so造婷用痃lid black;}<div class="trans"><div>你好我是一个旋转的模块</div></div>

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

4、旋转模块transform:rotate(-5deg);

5、支持IE-ms-transform:rotate(30deg); /* IE 9 */

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

6、支持火狐-moz-transform:rotate(30deg); /* Firefox */

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

7、支持谷歌和苹果-webkit-transform:rotate(30deg); /* Safari and Chrome */

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

8、支持Opera-o-transform:rotate(30deg); /* Opera */

如何用CSS3做一个旋转角度的模块
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢