CSS CSS3实现3D开门动画效果

作者: 计算机  发布:2019-01-11

  您可以狠狠地点击这里:CSS3 3d变换实现带音效的的单门开门效果demo

  我们的门需要设置为3D变换样式,否则效果回是平面的,会比较生硬,同时设置背后不可见,以符合现实认知。

  此时,我们只要通过CSS或者JS改变门元素的rotateY变换角度值,开关门效果就有了。

  例如,上面的单门开门效果,默认状态下,关闭,此时rotateY角度是0deg,同时是右开门,于是可以设置transform-origin为left,也就是们的左边缘为轴:

  如果理解上还是有些云里雾里,可以参见我之前访问量较高的一篇文章:“好吧,CSS3 3D transform变换,不过如此!”

  其实就最终效果实现而言,难的其实不是开关门动作本身,而是门的3D效果的实现,本质上就是实现一个立方体效果,只不过这个立方体比较扁而已。

  我的实现步骤也是这样,首先,先把平面效果实现好,示意图如下(由于是半开门,我们只需要4个面就好了):

  然后,脑中脑补空间结构,要想变成3D效果,则上边沿需要沿着水平线度,右边沿沿着垂直线度。

  由于CSS中元素默认的transform变换中心点是中心,因此,上面直接旋转还不行。要么我们修改transform-origin位置,要么元素的中心提前偏移到门边缘的变换轴上。

  于是,三两下,我们3D效果就有了。具体可参见demo页面源代码,很好的学习案例素材。

  办公室或者书房的门是单门,深府大院的门都是双门,例如著名的小学生动画柯南中的那个门。

  同样的,上面截屏视频没有音效,如要真实感受开门的冲击,您可以狠狠地点击这里:CSS3 3d变换实现带音效的的双门开门效果demo

  这里的开门动画完全使用CSS3 transition过渡实现的,和一开始demo有所区别,一开始demo是定时器不断改变rotateY角度实现的。都是可以的,看君所需。

  端午节网站换了服务器,做了下https升级改造,遇到了一些坑,在life那里写一篇文章记录了下:“记录下网站服务器迁移和https升级遇到的坑”,有兴趣可以看看。

  还记得上届世界杯,在文章底部有吐糟到日本队,没想到这么快一晃四年过去了。

  四年间,多少社区和平台落寞或崛起,多少同行的博客断更或出新,聚合专栏以及公众号兴起,发生很多的变化与沉浮。而我,还是在自己的这片自留地上写写技术相关的东西,平均一周1~2篇,就像涓涓细水,虽不汹涌但贵在持续,09年到现在快9年时间,网站的年网页浏览器已经超过1000万了,这就是坚持的力量。

本文由www68399.com皇家赌场于2019-01-11日发布