51.transform实现奥运五环

这是一个正常的奥运五环,环环相扣的,

这是我写的五环,层层叠加的,那么怎么才能使下面的五环实现上面的效果呢,好奇的小明这种就问了,为什么不直接使用上面的图片呢,又快又方便.那肯定不行,因为产品说了,首先这个五环是响应式大小的,然后上面有一些按钮和一些交互效果,所以不能直接使用图片,那么我们使用css的3d效果来完成这种视觉效果把.

布局,就五个盒子 颜色不一样 ,我这里是用margin和transform来放的

  <style>
    .box {
      width: 800px;
    }

    .circle {
      display: inline-block;
      margin-left: 20px;
      width: 200px;
      height: 200px;
      border-radius: 50%;
    }

    .circle:nth-child(1) {
      border-color: #29abe3;
    }

    .circle:nth-child(2) {
      border-color: #000;
    }

    .circle:nth-child(3) {
      border-color: #ff0100;
    }

    .circle:nth-child(4) {
      border-color: #fcee21;
      transform-origin: center 25%;
      transform: translate(120px, -130px);
    }

    .circle:nth-child(5) {
      transform: translate(150px, -130px);
      border-color: #39b549;
    }
  </style>

我这里的效果实现方案主要是考rotateX,和translateZ实现的

1. 开启3d

    .box {
      width: 850px;
      transform-style: preserve-3d;
    }

2. 给修改第四个盒子

设置旋转中心 让他绕x轴旋转

    .circle:nth-child(4) {
      border-color: #fcee21;
      transform-origin: center 25%;
      transform: translate(120px, -130px) rotateX(1deg);
    }

3. 改黑色盒子

    .circle:nth-child(2) {
      transform: translateZ(-1px) rotateX(2deg);
    }

4.绿色盒子

    .circle:nth-child(5) {
      transform: translate(150px, -130px) rotateX(3deg) translateZ(3px);
    }

5.红色盒子

    .circle:nth-child(3) {
      transform: rotateY(-8deg) translateZ(8px);
    }

总结

首先说说缺点把,他是利用了c3的3d产生的视觉效果差异完成的.由于旋转会导致一点偏差.优点是提供了一种解决方案