Вращение и перекрытие треугольников css

Question

Я пытаюсь добавить на свой сайт какую-нибудь анимацию.

Вот код моего проекта (используется из этого ответа)

body{
        background-color: #312a50;
        font-family: Helvetica Neue;
        color: white;
    }
    html, body {
    height: 100%;
    }
    .main {
        height: 100%;
        width: 100%;
        display: table;
    }
    .wrapper {
        display: table-cell;
        height: 100%;
        vertical-align: middle;
    }
    .t1 {
        --t:10px;  /* Thickness */
        --c:black; /* Color */

        width:100px;
        display:inline-block;
        border:var(--t) solid transparent;
        border-bottom-color:var(--c);
        background:
            /* Left side */
            linear-gradient(to bottom left,
            transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
            transparent calc(50% + var(--t) + 1px)) right,
            /* right side */
            linear-gradient(to bottom right,
            transparent 49.5%,var(--c) 50% calc(50% + var(--t)),
            transparent calc(50% + var(--t) + 1px)) left;
        background-size:50% 100%;
        background-origin:border-box;
        background-repeat:no-repeat;
        }

    .t1:before {
        content:"";
        display:block;
        padding-top:86.6%;
        transform-origin: 50% 66%;
    }
    @-webkit-keyframes rotating {
        from {
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        }
        @keyframes rotating {
        from {
            -ms-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        to {
            -ms-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    .rotating15 {
        -webkit-animation: rotating 15s linear infinite;
        -moz-animation: rotating 15s linear infinite;
        -ms-animation: rotating 15s linear infinite;
        -o-animation: rotating 15s linear infinite;
        animation: rotating 15s linear infinite;
    }
    .rotating10 {
        -webkit-animation: rotating 10s linear infinite;
        -moz-animation: rotating 10s linear infinite;
        -ms-animation: rotating 10s linear infinite;
        -o-animation: rotating 10s linear infinite;
        animation: rotating 10s linear infinite;
    }
    .rotating8 {
        -webkit-animation: rotating 8s linear infinite;
        -moz-animation: rotating 8s linear infinite;
        -ms-animation: rotating 8s linear infinite;
        -o-animation: rotating 8s linear infinite;
        animation: rotating 8s linear infinite;
    }

<body>
    <div class="main">
        <div style="text-align: center;" class="wrapper">
            <img src="./assets/images/logop1.png" width="318px" style="margin-top: -600px; margin-right: -400px;">
            <div class="t1 rotating15" style="--t: 8px;--c: #43b2ed;width: 700px"></div>
            <div class="t1 rotating10" style="--t: 2px;--c: #4898f3;width: 700px"></div>
            <div class="t1 rotating8" style="--t: 5px;--c: #dd2883;width: 700px"></div>
        </div>
    </div>
 </body>

Ни один из треугольников не перекрывается, и каждый из них не вращается вокруг фиксированного центра.

Как исправить обе эти проблемы и добавить свой логотип посередине (с движущимися треугольниками):

Если это возможно, я был бы очень признателен, если бы мог получить дополнительную помощь!

_{Свободный перевод вопроса Rotating and overlapping css triangles от участника @Wazowski Man.}

Answer 1

Измените свой код, как показано ниже.
Треугольники должны быть position: absolute и transform-origin должны быть применены к основному элементу.
Также обратите внимание на использование translate с теми же значениями, что и у transform-origin.

body {
  background-color: #312a50;
  margin: 0;
}

.main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow:hidden;
}
img {
  border-radius:50%;
}
.t1 {
  --t: 10px;   /* Толщина */
  --c: black; /* Цвет */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  border: var(--t) solid transparent;
  border-bottom-color: var(--c);
  background: 
    /*Левая сторона */
    linear-gradient(to bottom left, transparent 49.5%, var(--c) 50% calc(50% + var(--t)), transparent calc(50% + var(--t) + 1px)) right, 
    /* Правая сторона */
    linear-gradient(to bottom right, transparent 49.5%, var(--c) 50% calc(50% + var(--t)), transparent calc(50% + var(--t) + 1px)) left;
  background-size: 50% 100%;
  background-origin: border-box;
  background-repeat: no-repeat;
  transform-origin: 50% 66%;
  animation: rotating var(--d, 15s) linear infinite;
  transform: translate(-50%, -66%) rotate(0deg);
}

.t1:before {
  content: "";
  display: block;
  padding-top: 86.6%;
}

@keyframes rotating {
  to {
    transform: translate(-50%, -66%) rotate(360deg);
  }
}

<div class="main">
  <img src="https://i.picsum.photos/id/1074/150/150.jpg">
  <div class="t1 "style="--t: 8px;--c: #43b2ed;"></div>
  <div class="t1" style="--d:10s;--t: 2px;--c: #4898f3;"></div>
  <div class="t1" style="--d:8s;--t: 5px;--c: #dd2883;"></div>
</div>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

Вращение и перекрытие треугольников css

Ответы (1 шт):