|
ПРАВИЛА КВЕСТОВ
★ Участие в квестах добровольное
★ Если застряли, кричите громко и вас услышат
Тайные комнаты
Страница: 1
Сообщений 1 страница 2 из 2
Поделиться12024-10-10 00:12:47
- Администратор
- Зарегистрирован: 2024-10-03
- Сообщений: 85
- Уважение: +1
- Позитив: +0
- Провел на форуме:
23 часа 41 минуту - Последний визит:
2024-11-15 20:06:04
Поделиться22024-11-13 15:16:38
- Администратор
- Зарегистрирован: 2024-10-03
- Сообщений: 85
- Уважение: +1
- Позитив: +0
- Провел на форуме:
23 часа 41 минуту - Последний визит:
2024-11-15 20:06:04
[html]
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Таблица с поворачивающимися картинками</title>
<style>
/* Основные стили таблицы */
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
}
td {
width: 150px;
height: 150px;
border: 1px solid #ddd;
position: relative;
overflow: hidden;
perspective: 1000px; /* Для эффекта 3D */
}
/* Контейнер для поворачивающихся элементов */
.flip-container {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
}
/* При наведении на ячейку поворачивается картинка */
td:hover .flip-container {
transform: rotateY(180deg);
}
/* Стороны карточки */
.front, .back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* Передняя картинка */
.front {
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
}
/* Задняя картинка */
.back {
background-color: #dcdcdc;
display: flex;
align-items: center;
justify-content: center;
transform: rotateY(180deg);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
/* Стиль для области отправки */
#send-area {
width: 80%;
margin: 20px auto;
padding: 10px;
border: 1px solid #ddd;
min-height: 100px;
}
</style>
</head>
<body>
<table>
<!-- Первая строка -->
<tr>
<td>
<div class="flip-container" onclick="copyImageToSendArea('https://via.placeholder.com/150?text=Front+1')">
<div class="front">
<img src="https://via.placeholder.com/150?text=Front+1" alt="Передняя картинка 1">
</div>
<div class="back">
<img src="https://via.placeholder.com/150?text=Back+1" alt="Задняя картинка 1">
</div>
</div>
</td>
<td>
<div class="flip-container" onclick="copyImageToSendArea('https://via.placeholder.com/150?text=Front+2')">
<div class="front">
<img src="https://via.placeholder.com/150?text=Front+2" alt="Передняя картинка 2">
</div>
<div class="back">
<img src="https://via.placeholder.com/150?text=Back+2" alt="Задняя картинка 2">
</div>
</div>
</td>
<td>
<div class="flip-container" onclick="copyImageToSendArea('https://via.placeholder.com/150?text=Front+3')">
<div class="front">
<img src="https://via.placeholder.com/150?text=Front+3" alt="Передняя картинка 3">
</div>
<div class="back">
<img src="https://via.placeholder.com/150?text=Back+3" alt="Задняя картинка 3">
</div>
</div>
</td>
<td>
<div class="flip-container" onclick="copyImageToSendArea('https://via.placeholder.com/150?text=Front+4')">
<div class="front">
<img src="https://via.placeholder.com/150?text=Front+4" alt="Передняя картинка 4">
</div>
<div class="back">
<img src="https://via.placeholder.com/150?text=Back+4" alt="Задняя картинка 4">
</div>
</div>
</td>
<td>
<div class="flip-container" onclick="copyImageToSendArea('https://via.placeholder.com/150?text=Front+5')">
<div class="front">
<img src="https://via.placeholder.com/150?text=Front+5" alt="Передняя картинка 5">
</div>
<div class="back">
<img src="https://via.placeholder.com/150?text=Back+5" alt="Задняя картинка 5">
</div>
</div>
</td>
<td>
<div class="flip-container" onclick="copyImageToSendArea('https://via.placeholder.com/150?text=Front+6')">
<div class="front">
<img src="https://via.placeholder.com/150?text=Front+6" alt="Передняя картинка 6">
</div>
<div class="back">
<img src="https://via.placeholder.com/150?text=Back+6" alt="Задняя картинка 6">
</div>
</div>
</td>
</tr>
<!-- Добавьте ещё 5 строк с аналогичной структурой -->
<!-- Вторая строка -->
<tr>
<!-- ... (копируйте структуру выше) -->
</tr>
<!-- ... Повторите до шестой строки -->
</table>
</body>
</html>
[/html]
Страница: 1
