Embedded Files
Как добавить переворачивающийся квадрат на сайт?
Тогда скопируйте предоставленный ниже код, и вставьте на свой сайт, а далее мы разберем данный код, чтобы было понятно как менять значения и описания:
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 200px;
height: 200px;
perspective: 1000px;
position: relative;
transform-style: preserve-3d;
animation: rotateCircle 5s infinite;
}
.circle-inner {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
.circle-side {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
text-align: center;
font-size: 20px;
line-height: 200px;
color: white;
}
.circle-front {
background-color: red;
transform: rotateY(0deg);
}
.circle-back {
background-color: green;
transform: rotateY(180deg);
}
@keyframes rotateCircle {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
</style>
</head>
<body>
<div class="circle">
<div class="circle-inner">
<div class="circle-side circle-front">Текст 1</div>
<div class="circle-side circle-back">Текст 2</div>
</div>
</div>
</body>
</html>
Разберем код по частям:
1. Объявление doctype и открывающих тегов `<html>`, `<head>`, `<style>`, `<body>`. Это стандартная структура HTML-страницы.
2. `.circle` - класс, определяющий контейнер круга. Задаются его размеры, перспектива (`perspective`), позиционирование и стиль переворачивания элементов (`transform-style: preserve-3d`). Также применяется анимация `rotateCircle` с бесконечным повторением.
3. `.circle-inner` - класс, определяющий внутренний контейнер круга. Задаются его размеры, позиционирование и стиль переворачивания элементов (`transform-style: preserve-3d`).
4. `.circle-side` - класс, определяющий сторону круга. Задаются размеры, позиционирование, свойство `backface-visibility` для скрытия обратной стороны элемента, а также стили текста.
5. `.circle-front` и `.circle-back` - классы, определяющие переднюю и заднюю стороны круга. Задаются цвета фона и поворот (`transform: rotateY()`).
6. `@keyframes rotateCircle` - определение анимации. Задаются ключевые кадры (`0%`, `50%`, `100%`) с соответствующими значениями поворота (`transform: rotateY()`). Анимация будет плавно переворачивать круг от одной стороны к другой и обратно за 5 секунд.
7. Разметка внутри `<body>` включает контейнер круга `<div class="circle">`, который содержит внутренний контейнер `<div class="circle-inner">`, а внутри него располагаются две стороны круга с соответствующими классами (`<div class="circle-side circle-front">`, `<div class="circle-side circle-back">`). Внутри сторон круга размещается текст, который будет виден на каждой стороне.
Этот код создает анимированный квадрат, который автоматически переворачивается от одной стороны к другой, показывая разные тексты на каждой стороне.
Продолжим разбор кода:
8. Заданы стили для `.circle`, `.circle-inner`, `.circle-side`, `.circle-front`, `.circle-back` с помощью CSS-селекторов.
9. Внутри `<div class="circle">` находится `<div class="circle-inner">`, который служит контейнером для двух сторон круга.
10. `<div class="circle-side circle-front">` определяет переднюю сторону круга. Она имеет красный фон и отображает текст "Текст 1".
11. `<div class="circle-side circle-back">` определяет заднюю сторону круга. Она имеет зеленый фон и отображает текст "Текст 2".
12. `@keyframes rotateCircle` определяет анимацию `rotateCircle`. Анимация начинается с нулевого кадра, где круг повернут на 0 градусов (`transform: rotateY(0deg)`). На 50% кадре круг поворачивается на 180 градусов (`transform: rotateY(180deg)`). На 100% кадре круг возвращается в исходное положение (`transform: rotateY(0deg)`). Анимация повторяется бесконечно.
Google Sites
Report abuse