Rotacja elementu bez rotacji zawartości

pytanie zadane 26 września 2020 w HTML i CSS przez Antoni2422 Użytkownik (570 p.)

Witam,

Mam problem z rotacją. Ptrzebuje tekstu napisanego w koło, ale hciałbym aby moje cyferki były ustawione podobnie jak mamy w zegarkach.

( 1

2 3

4) - coś takiego.

HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dokument</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
    <span style="--i:1;">1</span>
    <span style="--i:2;">2</span>
    <span style="--i:3;">3</span>
    <span style="--i:4;">4</span>
    <span style="--i:5;">5</span>
    <span style="--i:6;">6</span>
    <span style="--i:7;">7</span>
    <span style="--i:8;">8</span>
    <span style="--i:9;">9</span>
</div>
</body>
</html>

CSS:

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.loader
{
    position: relative;
    width: 100px;
    height: 100px;
}

.loader span
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(calc(40deg * var(--i)));
}

1 odpowiedź

odpowiedź 26 września 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 27 września 2020 przez Antoni2422

Najlepsza

Taki efekt możesz uzyskać np przez umieszczenie cyfr w dodatkowym spanie i ustawienie wysokości i szerokości na tylko tyle ile zajmuje tekst w środku np przez initial (w przeciwnym wypadku odziedziczy po zewnętrznym spanie).

Taka sytuacja sprawi, że będziesz mieć "2 płaszczyzny", pierwsza będzie odpowiedzialna za przesuwanie na kolejne miejsca a druga za prostowanie cyfr. Na przykład w wyniku pierwszego przesunięcia cyfra przesunie Ci się o 40 stopni i jednocześnie przekrzywi o 40 stopni, żeby to naprostować trzeba przekrzywić (samą literę - drugą płaszczyznę) o -40 stopni i tak dla każdej.

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dokument</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
        }

        .loader {
            position: relative;
            width: 100px;
            height: 100px;
        }

        .loader span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotate(calc(40deg * var(--i)));
        }

        .loader span>span {
            width: initial;
            height: initial;
            transform: rotate(calc(-40deg * var(--i)));
        }
    </style>
</head>

<body>
    <div class="loader">
        <span style="--i:1;"><span>1</span></span>
        <span style="--i:2;"><span>2</span></span>
        <span style="--i:3;"><span>3</span></span>
        <span style="--i:4;"><span>4</span></span>
        <span style="--i:5;"><span>5</span></span>
        <span style="--i:6;"><span>6</span></span>
        <span style="--i:7;"><span>7</span></span>
        <span style="--i:8;"><span>8</span></span>
        <span style="--i:9;"><span>9</span></span>
    </div>
</body>