注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

阿当的博客

世界是个游乐场

 
 
 

日志

 
 

基于css的3d和动画  

2014-04-04 13:45:00|  分类: html5,css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

基于css的3d和动画 - 阿当 - 阿当的博客


demo地址:http://www.adanghome.com/js_demo/42/

======================================================


不得不再次感叹下css3的强大!动画、3d居然全都用描述性语言css给描述出来了。。。一行js也不用写。


一些3d相关的概念,之前在看css3的3d api设计时,看不太明白。这几天试玩了下three.js,了解了3d图形学的一些基本概念,然后就豁然开朗了。


另外,再感叹下css3的动画处理,无论逐帧动画,还是补间动画,顺序播放、逆序播放、交叉播放,播放次数,播放延迟,还是播放加速度,什么都可以简单地通过描述给描述出来。想起flash的ide、想起js写的动画组件。。。


再次膜拜下css的属性设计者们,你们真的是天才。


需要注意的是:


1)css的语法其实底层是矩阵变化,不同的元素可以设置不同的景深!这和threejs那种全局只能设置一个摄像头完全不同。也就是说,如果需要的话,每个元素的3d效果都可以单独设置,并不需要全局共用同一个影深。而css的这些语法不过是让使用者们更容易理想,相当于为开发者们封了一个3d矩阵变化的css语法糖。


2)默认情况下,影深的观察点是元素的中心位置,如果元素没有设置固定宽高,那么动态为父容器添加一个子元素,为让父容器的宽高产生变化,也就影响了之前元素的3d效果。所以可以为父元素设置一个固定宽高,或者将观察点设为左、上。


3)父容器设置了景深,子元素也设置了景深,两者会效果叠加,而不是覆盖。


  评论这张
 
阅读(27)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017