05.07.2024 в 09:53

Объяснение свойства поворота CSS

Свойство поворота является частью модуля преобразования CSS, который позволяет разработчикам применять различные преобразования к элементам на веб-странице. Функция поворота позволяет поворачивать элементы на заданный угол, изменяя их ориентацию, но не положение в потоке документов. Эта характеристика обеспечивает огромную универсальность, допуская вращение как по часовой стрелке, так и против часовой стрелки.

Синтаксис и использование

Синтаксис свойства поворота CSS довольно прост. Разработчики определяют желаемый угол поворота в скобках функции поворота следующим образом:

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

В этом примере класс .rotate поворачивает целевой элемент на 45 градусов по часовой стрелке. Важно отметить, что углы могут быть записаны в различных единицах измерения, включая градусы, радианы и градианы, что дает разработчикам свободу выбора наиболее подходящей единицы измерения для своих нужд.

Практический пример

Анимированная открытка с использованием вывода свойства CSS Transform:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Flip Card</title>
</head>
<body>
<div class="card-container">
    <div class="card" id="card" onclick="togglebuton();">
        <div class="front" style="background-color: #ee3646; color: #fff;">
            <h2>Front</h2>
        </div>
        <div class="back" style="background-color: #353535; color: #fff;">
            <h2>Back</h2>
        </div>
    </div>
</div></body>
</html>

CSS

.card-container {
        perspective: 1000px;
    }
    .card {
        width: 200px;
        height: 200px;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
    }
    .card.flip {
        transform: rotateY(180deg);
    }
    .card .front,
    .card .back {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
    }
    .card .back {
        transform: rotateY(180deg) translateZ(1px);
    }

Этот код создает простую анимацию переворачивания карты на основе CSS.

Давайте сделаем это шаг за шагом

.card-container: этот класс присваивается элементу-контейнеру, содержащему карточки. Атрибут перспективы определяет глубину трехмерного пространства, в котором отображаются карты. Большее значение дает более заметные 3D-эффекты.
.card: этот класс соответствует каждой отдельной карте. Его ширина и высота фиксированы на уровне 200 пикселей, а его положение установлено относительное. Свойство transform-style: save-3d гарантирует, что дочерние элементы карты сохранят свое трехмерное положение при преобразовании.
.card.flip: этот класс добавляется к карте, когда ее необходимо перевернуть. Он выполняет преобразование с помощью rotateY(180deg), который поворачивает карту на 180 градусов вокруг оси Y, эффективно переворачивая ее. Атрибут transform обеспечивает длительность и легкость перехода (0,6 секунды).
.card .front, .card .back: эти классы представляют лицевую и обратную стороны карты соответственно. Они идеально расположены внутри элемента карты, занимая всю его ширину и высоту. Свойство backface-visibility: hidden гарантирует, что задняя сторона не будет видна, когда карта обращена вперед.
.card .back: этот свойство посвящено исключительно обратной стороне карты. Первоначально она поворачивается на 180 градусов по оси Y и перемещается на один пиксель по оси Z. Этот перевод необходим, чтобы избежать потенциальных проблем с мерцанием или z-борьбой, вызванных тем, что задняя поверхность находится точно за передней.

JavaScript

function togglebuton(){
    document.getElementById("card").classList.toggle('flip');
}

document.getElementById — для выбора HTML-элемента с ID карточки. Объект документа представляет веб-страницу, а getElementById — это метод, который извлекает элемент по его атрибуту ID.

.classList.toggle('flip'): эта часть использует свойство classList выбранного элемента, которое предоставляет методы для управления классами элемента. Метод переключения вызывается с аргументом «flip». Этот метод добавляет класс «flip» к элементу, если он еще не присутствует, и удаляет его, если он присутствует.

Заключение

Функция поворота CSS — универсальный и эффективный инструмент для применения эффектов поворота к веб-элементам. Понимание того, как эффективно использовать этот атрибут, независимо от того, создаете ли вы простое вращение или сложную анимацию, может значительно улучшить визуальную привлекательность и взаимодействие ваших онлайн-приложений. Поэкспериментируйте с разными углами, переходами и комбинациями, чтобы раскрыть всю мощь функции поворота в своих проектах.

Источник:

Exit fullscreen mode

#JavaScript #CSS #HTML

Войти на сайт