原生css炫酷大屏特效

最近在忙于大屏页面的实现，在实现的过程之中还是遇到不少问题，并截取部分大屏内容记录下。以下就是我通过原生css实现的最终效果如下图（主要涉及到transform和animation）：

主要思路

1.首先实现最底部的转盘，由于涉及到3d所以需要用到 transform-style: preserve-3d; 改属性可以让子元素都属于同一个三维空间中呈现,通过 rotateX 让图一平铺，随后再旋转一份方向相反即可，通过 translateY 将两张图片拉开距离，得到下图：

利用相同方式复制4份，底部转盘就搞好了，剩余的就是将一些背景图片定位上去即可。最后通过 animation 来沿着Y轴 rotateY 旋转就好了。
2.顶部旋转的飞球实现，原本以为用和转盘相同的方式就能实现通过 rotateY来旋转，不过在实际操作过程中发现 rotateY 旋转图片就压扁了，而且到反面时文字是倒过来的。最后是通过 rotateZ来实现的，rotateZ 是沿着Z轴做旋转，不过可以换个思路，包裹两层父元素正向旋转，子元素在逆向旋转，最后一层才到图片层，这样做的好处在于图片能实现沿着Z轴旋转，但又不是文件颠倒。最后在使用 animation 配合 scale(1, 1); 放大缩小和绝对定位的 left 水平移动 来实现3D旋转效果。

以上就是我对原生animation和transform的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。

最后

以上就是自信爆米花为你收集整理的原生css炫酷大屏特效的全部内容，希望文章能够帮你解决原生css炫酷大屏特效所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。