SEE Conf 2021!  支付宝体验科技大会

preserve-3d

css3 3D旋转正方体

css3 3D旋转正方体
再来一个3D的案例,本实例自谷歌,技术自然不用说了,那是一级棒。个人能力有限,我就挑简单的分析下呵呵。说下这个正方体的实现吧,先设置父级元素的transform-style:preserve-3d,然后定义各个面的宽高及绝对定位并设置scale3D为1.2倍,最后就是把各个面分别运用rotateX,rotateY,再运用translateZ拉开距离。至于旋转的运动则是设置父元素的animation从0到360deg的旋转。既然是google的案例,那肯定不支持火狐啊,不过只要换个前缀火狐也不是问题吧。

css3 3D动画效果

css3 3D动画效果
呵呵又来一个3D制作,就不相信搞不定3D是吧。多看几个demo,多实践下,整个简单的3D原来也没想象的那么难的,还是可以搞定的。这个案例出现的还是很早的,只是当时只拿来欣赏吧,现在终于可以拿过来分析分析了。本实例先给li元素设置一个透视值为500px,然后给图片和文字信息都设置一个Y轴上的旋转30度,即rotateY(30deg),然后要实现文字和图片有个层级的效果,就给文字设置了Z轴上的偏移,即translateZ(30px),这样一个3D效果就出来了,至于动画部分就是hover的时候rotateY为0。这个demo问世的时候只有谷歌浏览器支持,所以请用google浏览器查看效果,至于download的文件已经经过我的修改,不过鼠标滑过的时候还是有bug,不太明白为什么,希望高手可以指点下。

css3 3D图片展

css3 3D图片展
再来一个css3 3D效果的实例,哈哈。今天在群里看到有人推荐张鑫旭的css3 3D文章,去看了下,太棒了,想学css3 3D特效的必备学习参考资料啊,所以晚上回来更新了下上一篇文章,把那篇文章的地址贴进去了。顺便再来一个css3 3D特效,不管会不会,观赏下开开眼界吧。注意demo为wekit版本(为了尊重作者我们贴出的demo地址都为原来的地址,而download则全部从本站下站),如需查看火狐版请download

css3图片与文字3D transform切换

css3图片与文字3D transform切换
这是个3D的切换效果,不太明白,在我的概念里还没有建立好一个3D模型,不知道如何把一个二维的图形如何转成三维。更谈不上动画了,所以这个案例对于我来说,暂时只是欣赏。如有明白的可以给讲一下,先谢过。
返回顶部