Добавляет свойство `rotate` и демки #5449

nasty23-star · 2024-07-18T15:42:38Z

Описание

Превью: https://content-5449.dev.doka.guide/css/rotate/

Кратко написала о свойстве rotate, о единицах , в которых измеряется поворот, о разнице со свойством transform, поддержке браузеров, добавила демки

Closes #4614

Чек-лист

Текст оформлен согласно руководству по стилю
Ссылки на внутренние материалы начинаются со слеша и заканчиваются слэшем либо якорем на заголовок (/css/color/, /tools/json/, /tools/gulp/#kak-ponyat)
Ссылки на картинки, видео и демки относительные (images/example.png, demos/example/, ../demos/example/)

skorobaeus

Очень залипательная анимация получилась 💙

css/rotate/demos/basic/index.html

github-actions · 2024-07-24T14:09:21Z

Превью контента из 20c1e21 опубликовано.

skorobaeus

Суперско!

solarrust

Большое спасибо за доку =)

Предложила несколько правок по структуре повествования. Посмотри, пожалуйста! 🙏

solarrust · 2024-07-25T17:08:08Z

css/rotate/demos/basic/index.html

+    <div class="box" id="box1">rotate Z</div>
+    <div class="box" id="box2">rotate Y</div>
+    <div class="box" id="box3">vector & angle</div>
+    <div class="box" id="box4">turn</div>
+    <div class="box" id="box5">flat</div>
+    <div class="box" id="box6">rad</div>
+    <div class="box" id="box7">grad</div>


Очень хорошо было бы куда-то вывести код со значением =)

подписать рядом значения, которые заданы?

Ага, или рядом или прямо на фигуре (но надо смотреть, норм ли получится)

solarrust · 2024-07-25T17:09:45Z

css/rotate/index.md

+
+## Кратко
+
+Свойство `rotate` используют, когда нужно повернуть элемент.


Давай, пожалуйста, тут напишем одно предложение про то, что раньше это было возможно только при помощи функции у свойства transform, а теперь вот отдельное свойство. Это, кмк, довольно важная информация.

solarrust · 2024-07-25T17:11:20Z

css/rotate/index.md

+Свойство может принимать значения для поворота по оси Z. Например:
+
+```css
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+rotate: -50grad;
+```


Кажется, тут нужно расписать чуть подробнее. Что-то вроде «Когда указано только одно значение, то оно поворачивает элемент по оси z». И можно отдельную микро-демку с медленным поворотом по ховеру, например. Что скажешь?

solarrust · 2024-07-25T17:13:00Z

css/rotate/index.md

+rotate: -50grad;
+```
+
+К значению величины поворота можно добавить уточнение, по какой из трёх осей (X, Y, Z) применится значение. Эквивалентно `rotateX()`, `rotateY()`, `rotateZ()`:


Suggested change

К значению величины поворота можно добавить уточнение, по какой из трёх осей (X, Y, Z) применится значение. Эквивалентно `rotateX()`, `rotateY()`, `rotateZ()`:

К значению величины поворота можно добавить уточнение, по какой из трёх осей (_x_, _y_, _z_) применится значение. Эквивалентно `rotateX()`, `rotateY()`, `rotateZ()`:

В этом блоке ещё было бы хорошо уточнить можно ли задавать несколько значений этому свойству. Если нет, то как поступать.

solarrust · 2024-07-25T17:14:28Z

css/rotate/index.md

+
+## Как понять
+
+Свойство `rotate` в CSS поворачивает элемент вокруг одной или нескольких осей. Это можно представить как вращение элемента вокруг этих точек в направлениях по часовой стрелке и против часовой стрелки, измеряемых в градусах, градиентах, радианах и значениях поворота.


Тут лучше рассказать более подробную историю про трансформ, его функции и необходимость в отдельных свойствах трансформации.

solarrust · 2024-07-25T17:14:38Z

css/rotate/index.md

+
+Свойство `rotate` в CSS поворачивает элемент вокруг одной или нескольких осей. Это можно представить как вращение элемента вокруг этих точек в направлениях по часовой стрелке и против часовой стрелки, измеряемых в градусах, градиентах, радианах и значениях поворота.
+
+## О единицах, применяемых к свойству


Suggested change

## О единицах, применяемых к свойству

## Единицы измерения

solarrust · 2024-07-25T17:17:27Z

css/rotate/index.md

+deg: один градус равен 1/360 полного круга.
+
+grad: один градиан равен 1/400 полного круга.
+
+rad: радиан — это длина диаметра круга вокруг дуги фигуры. Один радиан равен 180 градусам или 1/2 полного круга. Один полный круг равен 2π радиан, что соответствует 6,2832 радиан или 360 градусам.
+
+turn: один поворот — это один полный круг. Половина круга равна 0,5 оборота или 180 градусов.
+
+Свойство поворота принимает любую из этих единиц, поскольку они представляют собой разные способы выражения одной и той же идеи: угла вокруг круга. И они одинаково поддерживаются всеми основными браузерами.


Можно убрать этот блок и в блоке «Как пишется» упомянуть, что значения могут задаваться в любых единицах измерения углов и дать ссылочку → https://doka.guide/css/numeric-types/#edinicy-izmereniya-uglov

solarrust · 2024-07-25T17:18:02Z

css/rotate/index.md

+
+## Поддержка
+
+Свойство `rotate` поддерживается большинством современных браузеров, убедиться можно на ресурсе [Can I Use](https://caniuse.com/mdn-css_properties_rotate).


Раз нет особенностей поддержки, то, в целом, можно опустить этот блок

solarrust · 2024-07-25T17:20:36Z

css/rotate/index.md

+
+## Свойство rotate, переходы и анимация
+
+`Rotate` поддерживает переходы и анимацию CSS, которые можно делать с помощью `hover` и `@keyframes`.


Suggested change

`Rotate` поддерживает переходы и анимацию CSS, которые можно делать с помощью `hover` и `@keyframes`.

При помощи `rotate` создавать переходы и анимации стало чуть проще.

Кажется, это можно в блок «Как понять» в качестве демонстрации замены трансформа. Там же можно привести пример совмещения этих свойств.

solarrust · 2024-07-25T17:21:24Z

css/rotate/index.md

+}
+```
+
+Но `rotate` делает это вообще независимо от свойства `transform`, а также дает дополнительное преимущество в виде возможности вращения вдоль оси Z, что в настоящее время невозможно с помощью `transform: rotate()`.


Странно, ведь выше в тексте мы упоминаем rotateZ(), разве эта функция не даёт власти над поворотом по оси z?

solarrust · 2024-08-27T12:01:28Z

Пинг тут!

Добавляет свойство rotate и демки в Доку

e24b8d2

nasty23-star requested review from skorobaeus and solarrust as code owners July 18, 2024 15:42

github-actions bot added css Контент по CSS дока Справочный материал labels Jul 18, 2024

solarrust assigned nasty23-star Jul 19, 2024

skorobaeus reviewed Jul 22, 2024

View reviewed changes

css/rotate/demos/basic/index.html Show resolved Hide resolved

nasty23-star and others added 3 commits July 22, 2024 16:34

Поменяла стили и внешний вид у демки

4ebccc3

Полирует демки

202ba5a

Чутка редачит

20c1e21

skorobaeus approved these changes Jul 24, 2024

View reviewed changes

solarrust reviewed Jul 25, 2024

View reviewed changes

solarrust changed the title ~~Добавляет свойство rotate и демки в Доку~~ Добавляет свойство rotate и демки Sep 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Добавляет свойство `rotate` и демки #5449

Добавляет свойство `rotate` и демки #5449

nasty23-star commented Jul 18, 2024 •

edited by skorobaeus

Loading

skorobaeus left a comment

github-actions bot commented Jul 24, 2024

skorobaeus left a comment

solarrust left a comment

solarrust Jul 25, 2024

nasty23-star Aug 1, 2024

solarrust Aug 5, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust Jul 25, 2024

solarrust commented Aug 27, 2024


		## Кратко

		Свойство `rotate` используют, когда нужно повернуть элемент.

	К значению величины поворота можно добавить уточнение, по какой из трёх осей (X, Y, Z) применится значение. Эквивалентно `rotateX()`, `rotateY()`, `rotateZ()`:
	К значению величины поворота можно добавить уточнение, по какой из трёх осей (_x_, _y_, _z_) применится значение. Эквивалентно `rotateX()`, `rotateY()`, `rotateZ()`:


		## Как понять

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


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

		## О единицах, применяемых к свойству

	## О единицах, применяемых к свойству
	## Единицы измерения


		## Поддержка

		Свойство `rotate` поддерживается большинством современных браузеров, убедиться можно на ресурсе [Can I Use](https://caniuse.com/mdn-css_properties_rotate).


		## Свойство rotate, переходы и анимация

		`Rotate` поддерживает переходы и анимацию CSS, которые можно делать с помощью `hover` и `@keyframes`.

	`Rotate` поддерживает переходы и анимацию CSS, которые можно делать с помощью `hover` и `@keyframes`.
	При помощи `rotate` создавать переходы и анимации стало чуть проще.

Добавляет свойство rotate и демки #5449

Are you sure you want to change the base?

Добавляет свойство rotate и демки #5449

Conversation

nasty23-star commented Jul 18, 2024 • edited by skorobaeus Loading

Описание

Чек-лист

skorobaeus left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 24, 2024

skorobaeus left a comment

Choose a reason for hiding this comment

solarrust left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

solarrust commented Aug 27, 2024

Добавляет свойство `rotate` и демки #5449

Добавляет свойство `rotate` и демки #5449

nasty23-star commented Jul 18, 2024 •

edited by skorobaeus

Loading