css3中的那些3D效果
css3中的那些3D效果
1.碎碎念:为什么会有这篇文章呢,原因很简单,因为想发一个css的文章了,于是把以前的一些作品拿来充数。
2.预览地址:
--a.作品1:https://hswlian.github.io/JavaScript-blog/扇面动画/index.html
--b.作品2:https://hswlian.github.io/JavaScript-blog/百度学院/180513/进阶.html (hover卡片的翻转)
--c.作品3:https://hswlian.github.io/JavaScript-blog/百度学院/180513/hard.html (用鼠标hover到正方体上,正方体实现3D翻转)
css3里面的动效
css3中实现动效有animation和transition这两种方法。
作品1单纯的通过transition,也能实现比较好看的效果。
作品2中除了transition 还使用了一个有意思的属性 background-visible ,实现过程也比较简单(小猫咪是div+css画出来的,喵喵喵~)。
作品3实现过程:
--a.在最外层标签上使用perspective属性,使观察者与整个画布的z=0的平面产生距离。
--b.在正方体box上使用transform-origin将旋转中心变成正方体的中心轴,使用 transform-style 定义转换方式为3D。
--c.用transform-origin 和 rotate 改变6个面的位置。
--d.添加 transition 的过渡效果。
思考
好的动画效果,离不开动画师和编辑小组人员。