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 的过渡效果。
思考
好的动画效果，离不开动画师和编辑小组人员。
