前端实现奥运五环图标

 html

css

body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    transform-style:preserve-3d;
}
.olympic-rings {
    width: 800px;
    height: 400px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transform-style:preserve-3d;
  }
  .olympic-rings span{
    width: 200px;
    height: 200px;
    border: 15px ,solid, blue;
    margin: 5px;
    box-sizing: border-box;
    border-radius: 60%;
  }
  .olympic-rings span:nth-child(2){
    border-color: black;
    transform: rotateY(-3deg);
  }
  .olympic-rings span:nth-child(3){
    border-color: red;
    transform: rotateY(-3deg);
  }
  .olympic-rings span:nth-child(4){
    border-color: yellow;
    transform: translateY(-105px) rotateX(2deg) rotateY(2deg);
  }
  .olympic-rings span:nth-child(5){
    transform: translateY(-105px) rotateY(3deg);
    border-color: green;
  }