KillandCry Posts - Answer Overflow

KillandCry

•Created by KillandCry on 2/8/2024 in #front-end

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

1 replies

KPCKevin Powell - Community

•Created by KillandCry on 2/7/2024 in #front-end

Animation on svg icons

Hello coders. Unfortunately I lost too much time on this, and can't figure it out. Given the following codepen: https://codepen.io/Ionut-Sanda/pen/ZEPjXKp?editors=1100 I want to add some floating animations on each hexagon. The problem: I have some transform and scale on each path individually and, if i use the following CSS code, each individual hexagon, will be moved to the

path

path

coordinates.

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

#Hexagon-1,
#Hexagon-2,
#Hexagon-3,
#Hexagon-4,
#Hexagon-4,
#Hexagon-5,
#Hexagon-6,
#Hexagon-7,
#Hexagon-8,
#Hexagon-9,
#Hexagon-10 {
    animation: float 1s infinite ease-in-out alternate;
}
#Hexagon-1 {
    animation-delay: 0.5s;
}
#Hexagon-2 {
    animation-delay: 0.2s;
}
#Hexagon-3 {
    animation-delay: 0.4s;
}
#Hexagon-4 {
    animation-delay: 0.6s;
}
#Hexagon-5 {
    animation-delay: 0.8s;
}
#Hexagon-6 {
    animation-delay: 0.1s;
}
#Hexagon-7 {
    animation-delay: 0.3s;
}
#Hexagon-8 {
    animation-delay: 0.5s;
}
#Hexagon-9 {
    animation-delay: 0.7s;
}
#Hexagon-10 {
    animation-delay: 0.9s;
}

I tried multiple things, like adding the style animation to the

tag. Anyone has any idea how can i achieve this? Unfortunately, i need to do this using only html and css.

16 replies

Gaming

Programming