Здравствуйте!
Чтобы создать блоки с изображениями, размещенные под определенным углом и друг под другом, можно использовать CSS для поворота блоков и позиционирования их друг относительно друга. Вот один из способов сделать это:
1. Вы создаете контейнер для ваших изображений.
2. Затем вы добавляете каждый блок изображения и применяете к ним стиль для поворота, используя свойство `transform: rotate()`.
3. Скорректируете расположение блоков с помощью отступов и `position` для достижения нужного визуального эффекта.
Вот пример кода:
```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>
.container {
position: relative;
width: 200px; /* Ширина контейнера */
margin: 50px auto; /* Центрирование контейнера */
}
.image-block {
position: absolute;
left: 0; /* Выравнивание по левому краю контейнера */
transition: transform 0.3s;
}
.image-block img {
max-width: 100%; /* Адаптация изображения по ширине блока */
}
.image1 {
transform: rotate(-10deg) translateY(0);
}
.image2 {
transform: rotate(-10deg) translateY(40px); /* Пример вертикального смещения */
}
.image3 {
transform: rotate(-10deg) translateY(80px);
}
</style>
</head>
<body>
<div class="container">
<div class="image-block image1"><img src="image1.jpg" alt="Image 1"></div>
<div class="image-block image2"><img src="image2.jpg" alt="Image 2"></div>
<div class="image-block image3"><img src="image3.jpg" alt="Image 3"></div>
</div>
</body>
</html>
```
### Объяснение кода:
- **.container**: это родительский элемент, в котором будут находиться все изображения. Позиционирование установлено на `relative`, чтобы дочерние элементы могли позиционироваться относительно него.
- **.image-block**: это класс для блоков с изображениями, задана `position: absolute` для того, чтобы они могли быть расположены в контейнере в произвольных координатах.
- **.image1, .image2, .image3**: используют `transform` для задания угла поворота и вертикального смещения, чтобы создать нужный эффект и выровнять блоки друг под другом.
Не забудьте заменить `image1.jpg`, `image2.jpg`, `image3.jpg` на реальные пути к вашим изображениям.
Если у вас есть вопросы по этому коду или нужно что-то еще узнать, не стесняйтесь спрашивать!