Mata yang mengawasi (CSS)

Hover atau tap mana-mana di dalam kawasan petak. 'Mata' akan sentiasa mengawasi.

1

2

3

4

5

6

7

8

9

10

11

12

<div class="labu">
<ol class="labi">
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ol>
<div class="ttgk">
    <section class="ktk">
        <li class="face">1</li>
        <li class="face">2</li>
        <li class="face">3</li>
        <li class="face">4</li>
        <li class="face">5</li>
        <li class="face">6</li>
        <li class="face">7</li>
        <li class="face">8</li>
        <li class="face">9</li>
        <li class="face">10</li>
        <li class="face">11</li>
        <li class="face">12</li>
    </section>
</div>
</div>
<style>
  :root {
    --color: black;
    --num: 12;
    --partial: calc(1turn / var(--num));
    --i: 0;
    --angle: calc(var(--partial) * var(--i));
    height: 100%;
    animation: 5s infinite tengok;
}
:root:hover {
    animation: unset;
}
.labu {
    height: 70vh;
    display: grid;
    place-content: center;
    place-items: center;
    overflow: hidden;
  background: linear-gradient(160deg, #997c5d, #a68a6c, #b59b7f, #c4af99, #cfbeab, #dbcebf, #f0e9e1);  
  background-attachment: fixed;
  border: 3px solid #777;
}
.labu > * {
    grid-area: 1 / 1;
}
.ttgk {
    perspective: 400px;
    border-radius: 50%;
    outline: 1px solid var(--color);
    pointer-events: none;
}
.ktk {
    width: 100px;
    aspect-ratio: 1;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateZ(calc(var(--angle) - 90deg))
        rotateY(calc(70deg - var(--j) * 15deg));
    transition: transform 200ms;
}
.face {
    --stop: 60deg;
    --offset: calc((180deg - var(--stop)) / var(--num));
    --deg: calc(var(--stop) + var(--offset) * var(--n));
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
    font-size: 0;
    background: var(--color);
    transform: translateZ(calc(cos(var(--deg)) * 50px)) scale(sin(var(--deg)));
}
.face:nth-child(odd) {
    background: #def;
}
.face:last-child {
    --n: -1;
    filter: drop-shadow(0 0 10px var(--color));
    transform: translateZ(calc(cos(var(--deg)) * 50px)) scale(sin(var(--deg)))
        scale(0.4);
}
.labi {
    --r: 50%;
    position: relative;
    width: 100vmax;
    aspect-ratio: 1;
    outline: 1px solid;
}
li {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    --x: calc(50% + sin(var(--partial)) * var(--r));
    --y: calc(50% - cos(var(--partial)) * var(--r));
    clip-path: polygon(50% 50%, 50% 0%, var(--x) var(--y));
    transform: rotate(calc(var(--partial) * (var(--n) - 0.5)));
}
li li {
    --size: calc(50% - 12.5% * var(--n));
    clip-path: circle(var(--size));
    background: rgba(0 0 255 / 0.2);
    background: unset;
    transform: unset;
}
li:nth-child(1)  { --n:  0; }
li:nth-child(2)  { --n:  1; }
li:nth-child(3)  { --n:  2; }
li:nth-child(4)  { --n:  3; }
li:nth-child(5)  { --n:  4; }
li:nth-child(6)  { --n:  5; }
li:nth-child(7)  { --n:  6; }
li:nth-child(8)  { --n:  7; }
li:nth-child(9)  { --n:  8; }
li:nth-child(10) { --n:  9; }
li:nth-child(11) { --n: 10; }
li:nth-child(12) { --n: 11; }
:root:has(ol > li:nth-child(1):hover)  { --i:  0; }
:root:has(ol > li:nth-child(2):hover)  { --i:  1; }
:root:has(ol > li:nth-child(3):hover)  { --i:  2; }
:root:has(ol > li:nth-child(4):hover)  { --i:  3; }
:root:has(ol > li:nth-child(5):hover)  { --i:  4; }
:root:has(ol > li:nth-child(6):hover)  { --i:  5; }
:root:has(ol > li:nth-child(7):hover)  { --i:  6; }
:root:has(ol > li:nth-child(8):hover)  { --i:  7; }
:root:has(ol > li:nth-child(9):hover)  { --i:  8; }
:root:has(ol > li:nth-child(10):hover) { --i:  9; }
:root:has(ol > li:nth-child(11):hover) { --i: 10; }
:root:has(ol > li:nth-child(12):hover) { --i: 11; }
:root:has(ul > li:nth-child(1):hover)  { --j:  0; }
:root:has(ul > li:nth-child(2):hover)  { --j:  1; }
:root:has(ul > li:nth-child(3):hover)  { --j:  2; }
:root:has(ul > li:nth-child(4):hover)  { --j:  3; }
@keyframes tengok {
    0% {
        --i: 10;
        --j: 0;
    }
    25% {
        --i: 5;
        --j: 1;
    }
    50% {
        --i: unset;
        --j: 0;
    }
    75% {
        --i: 2;
        --j: 3;
    }
    100% {
        --i: 6;
        --j: 3;
    }
}
</style>

Rujukan CSS di codepen.io/9am/pen/oNVKOKB