Нужно повернуть текст на 270 градусов

@kilnart · Регистрация: 31.07.2011

Студворк — интернет-сервис помощи студентам

Имеется код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<ul class="how-we-sell__list">
                                    <li class="how-we-sell__item" style="background-image:url(http://krai/wp-content/uploads/2025/02/krai-116-hdr-1.jpg)">
                <div class="how-we-sell__item-botton">
                  <div class="how-we-sell__item-score">1</div>
                  <div class="how-we-sell__item-name">Приходите в магазин и присаживаетесь в кресло.</div>
                </div>
              </li>
                                        <li class="how-we-sell__item" style="background-image:url(http://krai/wp-content/uploads/2025/02/krai-116-hdr-1.jpg)">
                <div class="how-we-sell__item-botton">
                  <div class="how-we-sell__item-score">2</div>
                  <div class="how-we-sell__item-name">Мы приносим вам напитки, в том числе и алкогольные</div>
                </div>
              </li>
                                        <li class="how-we-sell__item" style="background-image:url(http://krai/wp-content/uploads/2025/02/krai-116-hdr-1.jpg)">
                <div class="how-we-sell__item-botton">
                  <div class="how-we-sell__item-score">3</div>
                  <div class="how-we-sell__item-name">Узнаём ваши потребности в обуви</div>
                </div>
              </li>
                                        <li class="how-we-sell__item" style="background-image:url(http://krai/wp-content/uploads/2025/02/krai-116-hdr-1.jpg)">
                <div class="how-we-sell__item-botton">
                  <div class="how-we-sell__item-score">4</div>
                  <div class="how-we-sell__item-name">Предлагаем варианты до  удовлетворённости</div>
                </div>
              </li>
                                        <li class="how-we-sell__item" style="background-image:url(http://krai/wp-content/uploads/2025/02/krai-116-hdr-1.jpg)">
                <div class="how-we-sell__item-botton">
                  <div class="how-we-sell__item-score">5</div>
                  <div class="how-we-sell__item-name">Снимаем мерки с стопы, если вы у нас  первый раз. <span>(Если уже покупали, у нас есть все ваши данные)</span></div>
                </div>
              </li>
                                        <li class="how-we-sell__item" style="background-image:url(http://krai/wp-content/uploads/2025/02/krai-116-hdr-1.jpg)">
                <div class="how-we-sell__item-botton">
                  <div class="how-we-sell__item-score">6</div>
                  <div class="how-we-sell__item-name">Мгновенно передаём заказ на производство. Ваш заказ будет готов в течении недели </div>
                </div>
              </li>
                                            </ul>

Задача сделать слайдер, как на рисунке

Сам код JS не требуется, я не могу понять, как повернуть текст на 270 градусов в блоках <div class="how-we-sell__item-botton">

попробовал изобразить на CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.how-we-sell__list {
    padding-top: clamp(2.5rem, 1.9766rem + 1.9704vw, 3.75rem);
    display: flex;
    justify-content: space-between;
    gap: 29px;
}
 
.how-we-sell__item {
    background-image: none !important;
    background-color: var(--fourColor);
    height: 549px;
    width: 81px;
    display: flex;
    border-radius: 20px;
}
 
.how-we-sell__item-botton {
    display: flex;
    gap: 23px;
    align-items: center;
    flex-direction: column-reverse;
    transform: rotate(270deg);
}

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

@NTHing · 21.02.2025, 01:57

На минималках такое надо?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style>
            ul {
                display: grid;
                gap: 1rem;
                list-style-type: none;
                border: 1px solid grey;
                margin: 1rem;
                padding: 1rem;
                rotate: 270deg;
                li {
                    border: 1px solid lightblue;
                }
            }
        </style>
        <ul>
            <li>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, aut
                dicta eaque, deserunt quas, voluptatibus optio laboriosam sint sunt
                molestiae asperiores. Iusto nulla voluptatibus, maxime aliquam soluta
                natus hic facere.
            </li>
            <li>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, aut
                dicta eaque, deserunt quas, voluptatibus optio laboriosam sint sunt
                molestiae asperiores. Iusto nulla voluptatibus, maxime aliquam soluta
                natus hic facere.
            </li>
            <li>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aperiam, aut
                dicta eaque, deserunt quas, voluptatibus optio laboriosam sint sunt
                molestiae asperiores. Iusto nulla voluptatibus, maxime aliquam soluta
                natus hic facere.
            </li>
        </ul>

@kilnart · 21.02.2025, 08:54 **[ТС]**

Не совсем. Здесь вы полностью UL поворачиваете, а мне нужно в одном LI повернуть только текст

@rr33rr · 21.02.2025, 12:43

Сообщение от kilnart

Нужно повернуть текст на 270 градусов

Как вариант можно использовать writing-mode.
Вроде такого:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html>
<head>
<style>
* {
  margin: 0;
  padding: 0;
}
.how-we-sell__list {
  list-style: none;
  display: flex;
  height: 580px;
  gap: 20px;
 
  counter-reset: item;
  margin: 10px;
}
.how-we-sell__list > li {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: calc(100% / 6);
  border-radius: 20px;
  background: rgb(27, 26, 83);
}
.how-we-sell__list > li > div {
  display: flex;
  align-items: center;
  writing-mode: sideways-lr;
  font: 24px arial;
  color: #fff;
  padding: 10px;
 
  counter-increment: item;
}
.msg {
  font: normal 16px arial;
  color: #ccc;
  text-decoration: none;
}
.how-we-sell__list > li > div::before {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ccf;
  font: bold 48px arial;
  padding: 10px;
 
  content: counter(item);
}
 
.how-we-sell__list > li.selected {
  justify-content: flex-start;
  width: 100%;
  background: center / cover url(chear.jpg) no-repeat;
}
.how-we-sell__list > li.selected > div {
  writing-mode: horizontal-tb;
  background: #cccc;
  color: #000;
  width: 100%;
  padding: 20px;
}
.how-we-sell__list > li.selected > div::before {
  font: bold 48px arial;
  padding: 10px;
  background: rgb(27, 26, 83);
  color: #fff;
  border-radius: 20px;
  width: 80px;
  height: 80px;
  margin-right: 20px;
  flex-shrink: 0;
 
  content: counter(item);
}
 
</style>
</head>
<body>
<ul class="how-we-sell__list">
  <li class="selected">
    <div>Приходите в магазин и присаживаетесь в кресло</div>
  </li>
  <li>
    <div>Мы приносим вам напитки, в том числе и алкогольные</div>
  </li>
  <li>
    <div>Узнаём ваши потребности в обуви</div>
  </li>
  <li>
    <div>Предлагаем варианты до удовлетворённости</div>
  </li>
  <li>
    <div><p>Снимаем мерки с стопы, если вы у нас первый раз. <a href="#" class="msg">(Если уже покупали, у нас есть все ваши данные)</a></p></div>
  </li>
  <li>
    <div>Мгновенно передаём заказ на производство. Ваш заказ будет готов в течении недели</div>
  </li>
</ul>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.
«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .

@kilnart 4 / 4 / 3 Регистрация: 31.07.2011 Сообщений: 155
	21.02.2025, 08:54 [ТС]
	Не совсем. Здесь вы полностью UL поворачиваете, а мне нужно в одном LI повернуть только текст 0