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

2013-04-01 6 条评论 11,044 次阅读被赞了 0 次

本文发布于：2013-04-01，最后更新于：2017-05-04，如果内容失效请留言告知。

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

2013-04-01_194246

查看下页面属性，即是 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示）。

2013-04-01_194343

这里用到了 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

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

长沙网络推广说道：

2013年04月6日 1:39 下午

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

回复
蓝莓绿茶说道：

2013年04月2日 9:39 下午

Google Chrome 24.0.1312.57 Windows 7 x64 Edition
哈哈，有意思。你的博客好专业，看不懂~~ :grin:

回复
抽油烟机什么品牌好说道：

2013年04月2日 1:08 下午

Sogou Explorer Windows 7
亲，愚人节过了，可以撤了！～

回复
威言威语说道：

2013年04月2日 1:07 下午

Firefox 19.0 Windows 7 x64 Edition
好吧，可以撤掉了，看着好累

回复
罗宾屋说道：

2013年04月2日 12:09 下午

Safari 6.0.3 Mac OS X 10.8.3
亲,你这个界面….让我眼睛很不舒服啊??

回复
龙城瓶子说道：

2013年04月2日 11:48 上午

Google Chrome 24.0.1312.57 Windows XP
挺有意思的哈。。。

回复

相关文章:

本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复 取消回复

本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可

发表回复取消回复