纯css实现奥运五环（交叉效果）

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

code.juejin.cn/pen/7145695…

本文写一个简单的css小demo记录一下奥运五环的场景

本文使用vue3来进行编辑，为了熟悉vue3和参加掘金的码上掘金活动，这几天我会抽空多更新几个模块来进行写dome，写的时间比较有限，所以Ui也是尽量从简，功能还是比较完善的。文章的内容不多，欢迎大家阅读和批评指正。

偶然间看到了用动画库或者canvas实现的一例奥运五环，通过查找资料看到了其实奥运五环也可以通过css来进行实现，为了更好的提高手写css的能力，又用这个实例来练习一下，其实采用到的主要的方法只是俩个简单的css属性，一个是transform-style: preserve-3d;和transform: rotateX(-1deg);通过旋转的方式来实现圆圈之间的叠加效果，也就是环环相扣的效果

 .c1{
        border: 5px solid red;
        top: 0;
        left: 0;
        transform: rotateX(-10deg);
    }
.c4{
    border: 5px solid orange;
    top: 50px;
    left: 53px;
    transform: rotateX(10deg);
}

对其中的第一个红色的环进行x轴的旋转，然后对应的第四个橙色的环，做出相反方向的旋转，一个是正值一个是负值，在平面上两个环是平行的，但在3d效果上看，一个向内弯，一个向外弯，由于有偏向角度的原因，那么这样的圆形其实是有点稍微扁的，但是肉眼上是看不出来很大的区别。

分别对五个环进行不同方向的偏移，建议开发的时候在控制台进行调试，不熟悉3d旋转的朋友可以在控制台边调试边看，就能找准合适的角度

<style>
    .box{
        width: 330px;
        height: 300px;
        margin: 20px;
        position: relative;
        transform-style: preserve-3d;
    }
    .cycle{
        width: 80px;
        height: 80px;
        border-radius: 50%;
        position: absolute;
    }
    .c1{
        border: 10px solid red;
        top: 0;
        left: 0;
        transform: rotateX(-1deg);
    }
    .c2{
        border: 10px solid gray;
        top: 0;
        left: 120px;
        transform: rotateX(3deg) rotateY(-3deg);
    }
    .c3{
        border: 10px solid green;
        top: 0;
        right: 0;
        transform: rotateY(-6deg);
    }
    .c4{
        border: 10px solid orange;
        top: 50px;
        left: 57px;
        transform: rotateX(1deg);
    }
    .c5{
        border: 10px solid blue;
        top: 50px;
        right: 57px;
        transform: rotateX(3deg) rotateY(5deg);
    }

  </style>

上面这个是我css的实现，3d旋转的前提是要在父元素加一个transform-style: preserve-3d的css，这样内部的子元素才能达到3d旋转的效果