oschina 的愚人节小创意:CSS3 的 transform 特性

11,062次阅读
6 条评论

共计 1070 个字符,预计需要花费 3 分钟才能阅读完成。

提醒:本文最后更新于2017-05-04 09:29,文中所关联的信息可能已发生改变,请知悉!

早上登陆 qq 后,不时的几个关于开发的群里都贴出了 oc 的地址,打开一看,噢,CSS3 的 transform rotate特性!

oschina 的愚人节小创意:CSS3 的 transform 特性

查看下页面属性,即是 js 的方式对页面全局加了如下属性:

-webkit-transform: rotate(-8deg);

你可以如此来写:

body {
-moz-transform: rotate(-8deg);
-webkit-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}

在这样的节日如此的恶搞一下,确实挺有点意思, oc 的此举也一定让不少程序猿们对 CSS3 加以更高的关注度。

志文工作室在其影响之下,也起了兴趣,对博客加了段 js ,诺,就是你看到的样子了(如图2示)。

oschina 的愚人节小创意:CSS3 的 transform 特性

这里用到了 CSS3 Gradient 和 CSS3 Transiform 的特性,如下

jQuery('body').css({
'-webkit-transform': 'skew(-5deg,-10deg)',
'-moz-transform': 'skew(-5deg,-10deg)',
'-o-transform': 'skew(-5deg,-10deg)',
'transform': 'rotate(-8deg)'
});
jQuery('body').css({
'background': '-moz-radial-gradient(left, red, #f96, yellow, green, #ace)',
'background': '-o-radial-gradient(left, red, #f96, yellow, green, #ace)',
'background': '-webkit-radial-gradient(left top,ellipse, red, #f96, yellow, green, #ace)'
});
// 点击页面任意地方取消
jQuery('body').one('click', function() {
$(this).css({
'-webkit-transform': '',
'-moz-transform': '',
'-o-transform': '',
'transform': ''
})
})

这里不是要详解相关技术的内容,所以不对它们作详细分析。如对之有兴趣,可参考阅读如下内容详解:

CSS3属性教程与案例分享
http://www.w3cplus.com/resources/css3-tutorial-and-case 

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2013-04-01发表,共计1070字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(6 条评论)
验证码
长沙网络推广 评论达人 LV.1
2013-04-06 13:39:17 回复
Sogou Explorer Sogou Explorer Windows 7 Windows 7

认真阅读文章了,顺便留了个链接,长沙网络推广http://www.cssyseo.com

 Windows  Chrome  内网IP
蓝莓绿茶 评论达人 LV.1
2013-04-02 21:39:45 回复
Google Chrome 24.0.1312.57 Google Chrome 24.0.1312.57 Windows 7 x64 Edition Windows 7 x64 Edition

哈哈,有意思。你的博客好专业,看不懂~~ :grin:

 Windows  Chrome  内网IP
抽油烟机什么品牌好 评论达人 LV.1
2013-04-02 13:08:33 回复
Sogou Explorer Sogou Explorer Windows 7 Windows 7

亲,愚人节过了,可以撤了!~

 Windows  MSIE  内网IP
威言威语 评论达人 LV.4
2013-04-02 13:07:29 回复
Firefox 19.0 Firefox 19.0 Windows 7 x64 Edition Windows 7 x64 Edition

好吧,可以撤掉了,看着好累

 Windows  Firefox  内网IP
罗宾屋 评论达人 LV.1
2013-04-02 12:09:44 回复
Safari 6.0.3 Safari 6.0.3 Mac OS X 10.8.3 Mac OS X 10.8.3

亲,你这个界面….让我眼睛很不舒服啊??

 Macintosh  Safari  内网IP
龙城瓶子 评论达人 LV.1
2013-04-02 11:48:16 回复
Google Chrome 24.0.1312.57 Google Chrome 24.0.1312.57 Windows XP Windows XP

挺有意思的哈。。。

 Windows  Chrome  内网IP