三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

CSS3的崛起——体验webkit的3D-Effect
作者:Neoxone    发表时间: 2010年11月16号,星期二     阅读:14,112 次

在性能保证的前提下,向更高更炫的效果发起冲击是未来Web的一大需求,而CSS必将借此大展抱负,崛起于未来的web技术之林,独树一帜,无可撼动。而在这条道路上,Apple公司无疑是一位先驱:他们要将web交互推入3D时代。目前,不仅W3C通过了3d-transforms的工作草案,在webkit上3d-transforms也已经实现了。

本文意在体验,浅析3d-transforms,读者如对3d-transforms有技术方面的兴趣,可以阅读以下文档:
W3C的 css3-3d-transforms (工作草案)
Apple的 CSS Visual Effects Guide —— transforms (指南)
Apple的 Visual Effects Transform Functions (属性方法介绍)
westciv.com的 3Dtransforms (可视化演示)
webkit.org的 3D Transforms (有Demo讲解)

警告:以下所有Demo效果须使用safari5,开源的chrominm浏览器进行体验,而即使是在chrome12下的效果也会大打折扣。
下面这个demo来自marcofolio.net:3d animation using pure CSS3
以下是代码删减版

进一步删减

上面的Demo中,我们一直没有应用-webkit-transform-style: preserve-3d;这个属性。
事实上,上面的Demo仅仅是”伪3D”,只是我们面对的是屏幕这样一个2D平面,上面的Demo还无法区分出真3D和伪3D。

我们再看看下面这个真3D的Demo——来自webkit.org

hover状态下transform-style值是flat;未hover状态下是preserve-3d —— 两者的效果差异一目了然。
在上面的Demo中,不仅应用了transform属性,还使用了webkit css中另一个很牛的属性——animation
(而我们最前面的Demo也使用了webkit css中第三个很牛的属性——transition)

参照上面的Demo,我们对原demo也做个修改,

标签: , , , , ,

5 条评论 发表在“CSS3的崛起——体验webkit的3D-Effect”上

  1. goldenfree 说:

    ):14:( ~例子在鼠标Hover的时候,鼠标下的块的旋转会轻微的变慢,但是会慢慢的和另一个同步!!!诡异啊~~~

    回复

    ONEBOYS 回复:

    hover的时候改变了margin值,你看到的现象应该是这个影响的。

    回复

  2. ONEBOYS 说:

    firefox10将支持 3D Transforms

    回复

  3. [...] 3d-transform的文章,一篇是CSS3的崛起——体验webkit的3D-Effect,写的比较早; 另一篇是 Firefox10的3D Transform [...]

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(