Pure css realizes Olympic five rings, 3D translation and rotation

---

foreword

1. It is not the real five rings, because it is formed through deformation.
2. The pixels of different computer monitors are different, and the display effect is different.
3. This method is not recommended.
4. It is mainly realized by means of rotation and translation.

---

renderings

---

html

<div class="olympic_rings">
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
    <span class="ring"></span>
</div>

---

css

.olympic_rings {
    
    
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    justify-content: center;
    transform-style: preserve-3d;
}

.ring {
    
    
    width: 100px;
    height: 100px;
    border: 10px solid #3884c2;
    border-radius: 50%;
    margin: 0 5px;
}

.ring:nth-child(2) {
    
    
    border-color: #000000;
    transform: translateZ(-1px) rotateX(2deg);
}

.ring:nth-child(3) {
    
    
    border-color: #d83a31;
    transform: translateZ(10px) rotateY(-15deg);
}

.ring:nth-child(4) {
    
    
    border-color: #f9d549;
    margin-top: -50px;
    transform: rotateX(1deg);
    transform-origin: center 15%;
}

.ring:nth-child(5) {
    
    
    border-color: #55ac58;
    margin-top: -50px;
    transform: rotateX(3deg);
    transform-origin: center 15%;
}