Разработка и продвижение проектов

теги: ,

Категории

Рубрики
В анализ конкурентов входит:
  • Анализ UX/UI сайта
  • Сбор и кластеризация семантики
  • Анализ конкурентов Я. Директ
  • Анализ конкурентов SEO
  • Формирование ТЗ и рекомендаций
  • Формирование стратегий
от 18200 

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

Чтобы перевернуть элемент в 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”

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

    Ответить

Оставьте комментарий

Смотрите также

Сотрудничество

Если вы нуждаетесь в дополнительных специалистах для реализации ваших проектов, то мы можем сотрудничать на выгодных условиях.

В данный момент мы предлагаем:

  • Интернет-маркетинг
  • Услуги SEO специалиста
  • Разработка сайтов на Wordpress, Bitrix, а также самописных на React
  • Разработка нативных приложений для iOS и Android
  • Разработка игр для мобильных платформ
  • UX/UI дизайн

Ждем и ваших предложений в форме ниже

Оставьте заявку для сотрудничества с командой Lion Digital Agency

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

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

Мы ответим в ближайшее время!

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

Быстрый заказ

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

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