Bardzo szybki CSS - rotate zamienia + na x

Bardzo prosta a zarazem ciekawa sztuczka, która zamienia znak plusa na znak zamykania (X) przy użyciu jednej ikony lub znaku + oraz transform rotate o 45 stopni. Genialne w swojej prostocie.

Nasz HTML, z podpiętymi stylami, skryptem JS oraz guzikiem posiadającym znak plusa. Tutaj zamiast ikony znak unicode, choć w prawdziwym projekcie powinna być ikona (znak po rotacji może się odrobinę rozjeżdżać ze środkiem, jako że to jest tekst):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test6.css">
</head>
<body>
    <button id="btn">✚</button>
    <script src="./test6.js"></script>
</body>
</html>

Teraz CSS – reset stylów, wycentrowanie elementów w body i ostylowanie przycisku:

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

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

button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background-color: bisque;
    font-size: 32px;
    text-align: center;
}

Łapiemy nasz guzik w JavaScript i ustawiamy mu toggle na klasę active (guzik służy do pokazywania i zamykania):

window.addEventListener("DOMContentLoaded", function(){
    let btn = this.document.querySelector("#btn");
    btn.addEventListener("click", function(){
        this.classList.toggle('active');
    })
})

Teraz nasza klasa active, która jest banalnie prosta – obracamy o 45 stopni znak plusa i mamy X, znak zamykania:

button.active {
    transform: rotate(45deg);
}

Użyliśmy unicode i elementu tekstowego, więc idealnie w centrum leżeć nie będzie. Można jednak użyć ikony i wtedy już będzie wyglądać porządnie. Choć jeśli chcemy się bawić – przy pomocy paddingu i znak tekstowy możemy wycentrować idealnie.

Na upartego możemy i bez ikony uzyskać idealne wycentrowanie, musimy tylko wstawić nasz znak unicode w span, odpowiednio go wycentrować:

<button id="btn"><span id="btn-plus">✚</span></button>

Teraz style:

button {
    (...)
    position: relative;
}
button span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Teraz trzeba metodą prób i błędów znaleźć odpowiednie proporcje aby przekrzywiony o 45 stopni span znajdował się idealnie w środku:

button.active span {
    transform: rotate(45deg) translate(-85%, -15%);
}

Oczywiście pamiętać należy, aby nie nadpisać transform więc te funkcje używamy w jednej linii.

Ja ustawiłem pierwotnie na -70% oba, odpaliłem devtoolsy na Chrome i jak już miałem klasę active włączoną to zaznaczałem style i strzałkami (tak można na Chrome) zwiększałem i zmniejszałem wartości, aż uzyskałem idealne wycentrowanie – warto te sztuczki znać i z nich korzystać bo bardzo ułatwiają pracę.

Bardzo szybki CSS – rotate zamienia + na x