css3中的那些3D效果

css3中的那些3D效果

1.碎碎念：为什么会有这篇文章呢，原因很简单，因为想发一个css的文章了，于是把以前的一些作品拿来充数。
2.预览地址：
--a.作品1：https://hswlian.github.io/JavaScript-blog/%E6%89%87%E9%9D%A2%E5%8A%A8%E7%94%BB/index.html
--b.作品2：https://hswlian.github.io/JavaScript-blog/%E7%99%BE%E5%BA%A6%E5%AD%A6%E9%99%A2/180513/%E8%BF%9B%E9%98%B6.html (hover卡片的翻转)
--c.作品3：https://hswlian.github.io/JavaScript-blog/%E7%99%BE%E5%BA%A6%E5%AD%A6%E9%99%A2/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 的过渡效果。

思考

好的动画效果，离不开动画师和编辑小组人员。

转载于:https://www.cnblogs.com/huasw/articles/9259760.html