我可以渲染一次3D元素，并多次引用它吗？

Question

我正在创建一个网站，每页需要显示此元素约30次：https://codepen.io/g4designs/pen/xzXxyo

HTML

.diamond.intro
 .diamond__base
  .diamond-bottom
     - (0..7).each do |i|
        .diamond-slice{:class => "diamond-slice--#{i}"}
           .diamond-slice-a
              .pavilion
                 .pavilion__face      
              .diamond-slice-b
                 .facet
                 .top

CSS（在codepen.io链接中）

不是让浏览器一次处理这个代码30次，是否有更有效的方法只进行一次工作并将其反映29次？还有其他选择来优化这个（除了创建动画gif）吗？

谢谢。