Rotating and overlapping css triangles

Question

I'm trying to add an animation of some sorts to my site.

Here's the code for my project (used from this answer)

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>

None of the triangles are overlapping, and they aren't spinning around a fixed centre each.

How do I fix both of these problems, and add my logo in the middle (with moving triangles):

If this is possible, it would be greatly appreciated if I could have any further help!

Thank you!

Temani Afif · Accepted Answer · 2021-02-15T12:35:25.983

Adjust your code like below. The triangles need to be position:absolute and transform-origin need to be applied to the main element. Note also the use of translate with the same values as 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;   /* Thickness */
  --c: black; /* Color */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  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;
  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://picsum.photos/id/1074/150/150">
  <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>

Thank you - How do I centre the image inside the triangles, as the whole triangle animation is on the left of the website and not the centre? — Wazowski Man, Jun 08 '20 at 16:42
@WazowskiMan you can try like this: https://jsfiddle.net/f73kudL0/ simply keep the main element inline-block — Temani Afif, Jun 08 '20 at 19:14
do you have discord - this isn't working for whatever reason... @Temani Afif — Wazowski Man, Jun 08 '20 at 19:52
@WazowskiMan no I don't have discord but add your full code here: https://jsfiddle.net/ — Temani Afif, Jun 08 '20 at 19:57
please see above - and forget the buttons, I will be able to add them later on! @Temani Afif — Wazowski Man, Jun 08 '20 at 20:08
@WazowskiMan try like this: https://jsfiddle.net/mruz0ydh/1/ don't add the text inside the same container as the triangles — Temani Afif, Jun 08 '20 at 20:12

Rotating and overlapping css triangles

1 Answers1