CSSASSCSSASS

我们之前有利用css3做过一个投影效果：纯css打造投影效果——CSS3属性transform的应用
主要是利用了transforms系列属性。
另外，在这篇文章里：CSS3的崛起——体验webkit的3D-Effect
我们还讨论了目前仍属于webkit独有的3d-transforms属性。

今天这个效果的实现还是用到了transform（之中的skew）。
起源是论坛里的这个帖子：http://bbs.blueidea.com/viewthread.php?tid=3012730

看代码

上面的代码中，我们可以看见有一句ie的滤镜注释，那是ie的阴影滤镜。
其实ie在很早的时候就开始以滤镜的形式支持各种变形和阴影了，所以如果你想让ie（9以下）浏览器也能展现css3的那些效果，你也可以考虑滤镜实现。
并且，有人已经帮你实现智能转换了。非常轻松，看这里：http://www.useragentman.com/IETransformsTranslator/

而如果你不屑于ie的滤镜，认为那是即将被淘汰的事物了，那不妨看看3d-transforms以及Animation属性这种目前只有webkit支持的，未来或许能进入css3标准的东西。
http://westciv.com/tools/transforms/index.html (除一般的transforms的演示外，还有3d-transforms和Animation的演示)。

最后，提醒一句，transform属性并非css3独有，svg，canvas中也都有实现，当然他们的写法非常类似。
下面是一个canvas中的transform属性可视化演示：http://www.cssass.com/blog/index.php/2010/817.html

标签： CSS3, skew, transform, 圆角, 投影

这篇文章发布于 2011年03月9号，星期三，16:02，归类于 CSS3。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。