• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Rotacja elementu bez rotacji zawartości

VPS Starter Arubacloud
+1 głos
94 wizyt
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ź

+4 głosów
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>

komentarz 27 września 2020 przez Antoni2422 Użytkownik (570 p.)
Wielkie dzięki,

Nie wiem dlaczego o tym nie pomyślałem. Może dlatego, że dawałem pseudo klasy które za to nie odpowiadały.

Jeszcze raz dziękuję!:)

Podobne pytania

0 głosów
2 odpowiedzi 1,247 wizyt
pytanie zadane 5 czerwca 2018 w HTML i CSS przez yato_ Początkujący (350 p.)
0 głosów
1 odpowiedź 146 wizyt
pytanie zadane 4 października 2016 w HTML i CSS przez ThePatrykOOO Dyskutant (8,380 p.)
+2 głosów
3 odpowiedzi 187 wizyt
pytanie zadane 20 czerwca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...