Чтобы перевернуть элемент в CSS, можно использовать свойство transform
и его функцию rotate()
. Также можно использовать функцию scaleX()
, если необходимо перевернуть элемент по горизонтали.
Переворот элемента на 180 градусов:
Используем функцию rotate()
и устанавливаем значение аргумента 180deg
.
.element {
transform: rotate(180deg);
}
Переворот элемента по горизонтали:
Используем функцию scaleX(-1)
.
.element {
transform: scaleX(-1);
}
С помощью префикса -webkit-
можно сделать этот код совместимым с браузерами, которые не поддерживают новые свойства CSS.
Применение префикса для поддержки устаревших браузеров:
.element {
-webkit-transform: scaleX(-1); /* для Safari, Chrome, Opera */
transform: scaleX(-1); /* для Firefox, IE и других браузеров */
}
Кроме того, можно также использовать свойство rotateY()
для получения более сложных видов поворота. Обратите внимание, что значения аргументов функций rotate()
и rotateY()
задаются в градусах, а значение аргумента функции scaleX()
— в процентах или числе с плавающей запятой.
2 комментария на «“Как перевернуть элемент CSS”»
Подумаю где можно применить такой эффект — поворот или даже переворот элемента. Интересно, а если элемент — тоже контейнер, будет ли поворот работать со всеми элементами контейнера? Попробую.
да я это искал