Доверьте продвижение нам

Попробуйте надежный хостинг для вашего сайта

Мы рекомендуем своим клиентам! Получите надежность и полное управление вашим сайтом.

Комментарии

2 комментария на «“Как перевернуть элемент CSS”»

  1. Ivaz Femza:

    Подумаю где можно применить такой эффект — поворот или даже переворот элемента. Интересно, а если элемент — тоже контейнер, будет ли поворот работать со всеми элементами контейнера? Попробую.

  2. Дамир:

    да я это искал

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

от 29 920 
от 1 499 098 

Как перевернуть элемент CSS

Views Icon44

Чтобы перевернуть элемент в 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() — в процентах или числе с плавающей запятой.

Поделиться:

Задать вопрос

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.

Оставить заявку

Оставляя заявку, вы соглашаетесь с политикой обработки персональных данных.