Quantcast
Channel: w3cplus
Viewing all articles
Browse latest Browse all 1557

将css3 3D实体化

$
0
0

这两三天一直比较关注css3的3D特效,从最初的稀里糊涂,到现在大概摸进门路,不得不感谢张鑫旭的这篇神作:好吧,CSS3 3D transform变换,不过如此!

从这里搞清楚了一些概念,然后多方查找相关的实例,慢慢的也算入了门,但是论及实际应用那肯定还有一段很长的路需要走。在实践的过程中,总是要构建好一个虚拟的3D框架的,但是由于我的想象力不够丰富,再加上高中的立体几何全部还给老师了,所以这个对我来说比较是个难题。我相信很多人都应该是个难题,于是根据上面张老师的神作,虚拟构建体操运动员,钢管舞,飞刀特技,慢慢的也能进入角色。但是每次都要虚拟构建这三个东西也太繁琐了。于是重新拿起来了立体框架,如下图:

然则本人想象力确实有限,所以每次这样虚拟的倒还不如虚拟构建前面三个具体的来得实际。既然张老师可以虚拟中抽出实体来,为什么我不可以。

于是我想到了桌子,凳子什么的乱起八糟的,但最终落在了我敲键盘的手上,对,我用我的手指完全可以模拟出那个立体框架。

X轴对应中指,Y轴对应拇指,Z轴对应食指,三个手指各成90度,立体框架构建完毕。效果如图:

这样我们要做css3 3D效果的话直接用着三个指头就可以构建一个实体的框架了,清晰可见,模拟X轴旋转,Y轴旋转什么的也就比较直观了。


Viewing all articles
Browse latest Browse all 1557

Trending Articles