Pure CSS で五輪、3D 変換、回転を実現

---

序文

1.変形して形成しているため、本物の五輪ではありません。
2. 異なるコンピュータモニタのピクセルは異なり、表示効果も異なります。
3. この方法は推奨されません。
4. それは主に回転と平行移動によって実現されます。

---

レンダリング

---

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%;
}