CSS3实现3D开门动画效果

2019-09-10 郑州网站建设  

一、CSS3单门3D开门效果的实现

效果如下视频:

配上开门的音效效果更棒!

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

开门效果实现的关键

1. 容器元素上设置perspective视角距离

示意CSS代码如下:

.door-frame { perspective: 1200px; } 2. transform-style设置为3D变换

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

.door { transform-style: preserve-3d; backface-visibility: hidden; } 3. rotateY变换实现门开关效果

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

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

.door { transform: rotateY(0deg); transform-origin: left; }

当门完全打开,则角度是90度,CSS表示为:

.door { transform: rotateY(-90deg); }

效果就实现了,核心就这么简单。

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

开门效果实现的难点

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

对于CSS3 立方体效果的实现,我的技巧是这样的:

还记不记得小时候我们玩折纸的手工,是怎么从2d平面变成3d立方体的呢?

折纸效果

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

门3D效果2D平面呈现

然后,脑中脑补空间结构,要想变成3D效果,则上边沿需要沿着水平线超视觉方向折叠过去90度,右边沿沿着垂直线超视觉方向折叠过去90度。

这种行为动作用CSS 3D变换语言描述就是rotateX(90deg)和rotateY(90deg)。

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

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

二、CSS3双门3D开门效果的实现

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

既然单门效果可以实现,双门自然也不在话下,效果如下视频:

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

实现原理和上面单门效果大同小异,就不赘述。

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


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1751.html转载请标明出处,谢谢合作!
标签:
  • CSS3
  • Ч
  • 3D
  • css33d
  • 单门
  • 开门