Kevin Powell - Community•10mo ago

Rotate Hexagons by their centers

So, I managed to build a hexagon with css only, but now, I can't figure out, how i can rotate the hexagon by it's own center. Everything i tried rotates the hexagon by a corner. Here is the code: https://codepen.io/Ionut-Sanda/pen/ZEPjXKp HTML:

    <div class="hexagons">
        <div class="hexagon">
            <div class="h w b bo"></div>
            <div class="h w o bo"></div>
            <div class="h w g bo"></div>
        </div>

        <div class="hexagon">
            <div class="h w b bo"></div>
            <div class="h w o bo"></div>
            <div class="h w g bo"></div>
        </div>
    </div>

    <div class="hexagons">
        <div class="hexagon">
            <div class="h w b bo"></div>
            <div class="h w o bo"></div>
            <div class="h w g bo"></div>
        </div>

        <div class="hexagon">
            <div class="h w b bo"></div>
            <div class="h w o bo"></div>
            <div class="h w g bo"></div>
        </div>
    </div>

CSS:

.hexagons .hexagon {
    position: absolute;
    animation: goingUp 5s linear infinite;

    &:nth-child(1) {
        --size: 40px;
        left: 100px;
        transform-origin: center center;
    }

    &:nth-child(2) {
        --size: 60px;
        left: 300px;
    }

    width: var(--size);
}

.h {
    height: calc(var(--size) * 2.1);
}
.w {
    width: calc(var(--size) * 3.325);
}
.bo {
    border-right: calc(var(--size) / 4) solid orangered;
    border-left: calc(var(--size) / 4) solid orangered;
}
.o {
    position: absolute;
    transform: rotate(120deg);
    border-radius: calc(var(--size) / 4);
}
.b {
    position: absolute;
    transform: rotate(240deg);
    border-radius: calc(var(--size) / 4);
}
.g {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: orangered;

    border-radius: calc(var(--size) / 4);
}

.hexagons .hexagon {
    position: absolute;
    animation: goingUp 5s linear infinite;

    &:nth-child(1) {
        --size: 40px;
        left: 100px;
        transform-origin: center center;
    }

    &:nth-child(2) {
        --size: 60px;
        left: 300px;
    }

    width: var(--size);
}

.h {
    height: calc(var(--size) * 2.1);
}
.w {
    width: calc(var(--size) * 3.325);
}
.bo {
    border-right: calc(var(--size) / 4) solid orangered;
    border-left: calc(var(--size) / 4) solid orangered;
}
.o {
    position: absolute;
    transform: rotate(120deg);
    border-radius: calc(var(--size) / 4);
}
.b {
    position: absolute;
    transform: rotate(240deg);
    border-radius: calc(var(--size) / 4);
}
.g {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    color: orangered;

    border-radius: calc(var(--size) / 4);
}

Any ideea is welcome

Ionut Sanda

CodePen

ZEPjXKp

...

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Rotate Hexagons by their centers