实现网页中炫酷旋转图形特效 实现网页中炫酷旋转图形特效的软件

今天来实现一个特殊图形的旋转，这个图形类似于钻石

通过样式动画调节，让其运动旋转起来，感兴趣的小伙伴多多支持！

首先分析该图形的组成，可分成上下两大部分，上面包含六个正三角形，下面有6个倒三角形！

css实现正三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 0 50px 170px 50px; border-bottom-color: rgba(255,0,0,0.5)

css实现倒三角形：上右下左的方向 border-style: solid;border-color:transparent;border-width: 170px 50px 0 50px; border-top-color: rgba(255,0,0,0.5)

然后提供一个3D环境，给外层盒子添加 transform-style: preserve-3d;flat 所有的子元素在2D平面中;preserve-3D 所有的子元素 在3D 平面中

具体代码看下面

html结构：

css样式：