CSS3 — Эффект вращения
Как сделать эффект вращения на CSS3
Для того, чтобы наглядно увидеть в действии эффект вращения на CSS3, наведите на красный квадрат мышью (или удерживайте пальцем на мобильном устройстве) и красный квадрат должен начать вращение.
Файл index.html
Итак, приступим. Создайте у себя на компьютере файл с названием index.html и напишите следующий код:
В файле index.html мы сделали стандартную html разметку и в body создали div с классом rotate. Также мы подключили между тегами head файл style.css.
Давайте зададим ему стили, для того, чтобы применить к нему эффект вращения.
Файл style.css
Создайте файл style.css и вставьте в него следующий текст:
Для красоты мы добавили CSS3 фильтр grayscale, делающий наш div черно-белый. О фильтрах css мы поговорим в следующих статьях.
Для совместимости с другими браузерами, мы добавили -webkit-transform, ms-transition и ms-transform.
Результат
Наведите курсор мыши на красный квадрат(или коснитесь пальцем в мобильном устройстве) и посмотрите результат.
Видеоурок: Как сделать эффект вращения на CSS3
В этом видеоуроке, мы писали код в редакторе SublimeText3 с плагином Emmet. Подробнее об этом замечательном редакторе и плагине Emmet вы можете прочитать в нашей статье: Sublime Text 3 — удобный редактор кода для веб-разработчиков
Вступайте в нашу группу VK и следите за новыми статьями.
Читайте также
Что такое NodeJS и npm?
XAMPP — как установить и настроить на Mac (Mojave, Sierra)
Как самостоятельно изучить веб-программирование
Взломали Cкайп, что делать?
Что такое реферальный спам в Google Analytics
Постраничная ленивая загрузка (lazy load) постов
Как стать профессиональным веб-разработчиком
Методы setTimeout и setInterval в Javascript
Реализация Lazy Load на Jquery
Три полезных CSS свойства для работы с изображениями
Массивы в Javascript
Что такое TypeScript
Sublime Text 3 — удобный редактор кода для веб-разработчиков
Установка и настройка веб-сервера для сайта в Ubuntu
Полезные приложения для веб-разработчиков в Google Chrome
Модальное окно на Jquery
GIT команды: Быстрый старт для новичков
Что такое конструктор в объектно-ориентированном программировании
Что такое объектно-ориентированное программирование
Как отправить форму без перезагрузки страницы (AJAX)
Как быстро создать сайт и привлечь поисковый трафик
Bitbucket: Крутой облачный GIT репозиторий
Javascript: Классы в Javascript
Что такое веб-хостинг и как выбрать хостинг для сайта
SQL запросы: Основы администрирования MySQL
Команды Linux: оболочка BASH
Joomla CMS: Преимущества и недостатки
Качественный сайт: семь ключевых свойств
Все материалы с сайта wh-db.
com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.
rotate — CSS: каскадные таблицы стилей
CSS-свойство rotate позволяет задавать преобразования поворота индивидуально и независимо от свойства transform . Это лучше соответствует типичному использованию пользовательского интерфейса и избавляет от необходимости запоминать точный порядок функций преобразования, которые необходимо указать в свойстве преобразования .
/* Значения ключевых слов */ вращать: нет; /* Значение угла */ поворот: 90 градусов; повернуть: 0,25 оборота; вращение: 1,57 рад; /* имя оси x, y или z плюс угол */ повернуть: х 90 градусов; повернуть: y 0,25 оборота; повернуть: z 1,57 рад; /* Вектор плюс значение угла */ повернуть: 1 1 1 90 градусов; /* Глобальные значения */ повернуть: наследовать; повернуть: начальный; повернуть: вернуться; повернуть: вернуть слой; повернуть: не установлено;
Значения
- Значение угла
<угол>, определяющий угол поворота затронутого элемента вокруг оси Z.
Эквивалент функции rotate()(2D-вращение).- Имя оси x, y или z плюс значение угла
Имя оси, вокруг которой вы хотите повернуть затронутый элемент (
"x", «y» или «z"), плюс<угол>, указывающий угол поворота элемента. . Эквивалент функцииrotateX()/rotateY()/rotateZ()(трехмерное вращение).- вектор плюс значение угла
Три
<угол>, указывающий угол поворота элемента. Эквивалент функцииrotate3d()(трехмерное вращение).-
нет Указывает, что поворот не применяется.
Эквивалент функции | Исходное значение | нет |
|---|---|
| Применяется к трансформируемым элементам | |
| нет | |
| Вычисленное значение | как указано |
| Тип анимации | преобразование a |
| Создает контекст наложения | да | 90 077
повернуть =
нет |<угол> |
[ х | у | г | <число>{3} ] && <угол>
Вращение элемента при наведении
В следующем примере показано, как использовать rotate свойство вращать элемент вдоль различных осей при наведении.
Первый блок поворачивается на 90 градусов при наведении по оси Z, второй — на 180 градусов по оси Y при наведении, а третий — на 360 градусов при наведении вокруг вектора, заданного координатами.
HTML
повернуть Zповернуть Yвектор и угол
CSS
.box {
отображение: встроенный блок;
поле: 1em;
минимальная ширина: 6,5 см;
высота строки: 6,5 em;
выравнивание текста: по центру;
переход: 1 с облегчение входа-выхода;
граница: 0,25 em пунктирная;
}
#box1:наведите {
повернуть: 90 градусов;
}
#box2:наведите {
повернуть: y 180 градусов;
}
#box3:наведите {
повернуть: 1 2 1 360 градусов;
}
Результат
| Спецификация |
|---|
| Модуль преобразования CSS Уровень 2 # индивидуальные преобразования | 90 077
Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.
-
перевод -
шкала -
преобразование
Примечание: перекос не является независимым преобразование значение
Нашли проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Просмотрите исходный код на GitHub.
Последний раз эта страница была изменена участниками MDN.
Как повернуть что-либо в Squarespace с помощью CSS // Учебное пособие по вращению содержимого Squarespace — InsideTheSquare.co
ВЕРСИЯ 7.1ВЕРСИЯ 7CUSTOM CSS
Написано insidethesquare
Это руководство было записано в Squarespace 7.
Если вы являетесь пользователем Squarespace, скорее всего, вы знаете возможности настройки вашего сайта, чтобы он выглядел именно так, как вы этого хотите.
Но знаете ли вы, что вы также можете вращать блоки контента на своей странице Squarespace с помощью CSS?
Правильно — с помощью небольшого кода вы можете придать своей странице новый динамичный вид!
В этом уроке Squarespace вы узнаете, как использовать простой CSS для поворота буквально всего на вашем сайте Squarespace!
Мы будем поворачивать изображение на основе его идентификатора блока, а затем определенного типа текста с помощью его селектора.
Вот пошаговое обучающее видео, которое проведет вас через процесс, а необходимые коды перечислены ниже:
Вот как начать:
Для начала мы будем использовать свойство преобразования.
Свойство transform:rotate() позволяет нам поворачивать наш блок на любое число градусов, положительное или отрицательное.
Вот как это свойство выглядит, когда вы хотите повернуть что-то на 45 градусов по часовой стрелке:
transform:rotate( 45 )
Далее мы начнем поворачивать наш блок контента с помощью CSS, но сначала нам нужно найти его селектор или его уникальный идентификатор блока.
→ Чтобы получить мой список селекторов для Squarespace, , нажмите здесь.
→ Не знаете, как получить идентификатор блока? Вот ссылка на бесплатное расширение Chrome , которое я использую, чтобы легко получить информацию об идентификаторе блока. Я не связан с этим расширением или тем, кто его сделал, просто фанат!
Получив эту информацию, все, что нам нужно сделать, это добавить следующую строку кода в наш пользовательский редактор CSS (в разделе «Дизайн» > «Пользовательский CSS»):
#block-123456 {transform: rotate( 90deg )}
Это повернет наш блок контента на 90 градусов по часовой стрелке, вот и все!
С помощью всего одной простой строки кода мы можем быстро создать собственный элемент дизайна для нашего сайта Squarespace.