在性能保证的前提下,向更高更炫的效果发起冲击是未来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也做个修改,
刚刚看到一套教程
http://desandro.github.com/3dtransforms/
回复
~例子在鼠标Hover的时候,鼠标下的块的旋转会轻微的变慢,但是会慢慢的和另一个同步!!!诡异啊~~~
回复
ONEBOYS 回复:
一月 18th, 2011 at 08:45
hover的时候改变了margin值,你看到的现象应该是这个影响的。
回复
firefox10将支持 3D Transforms
回复
[...] 3d-transform的文章,一篇是CSS3的崛起——体验webkit的3D-Effect,写的比较早; 另一篇是 Firefox10的3D Transform [...]