Для того, чтобы наглядно увидеть в действии эффект вращения на CSS3, наведите на красный квадрат мышью (или удерживайте пальцем на мобильном устройстве) и красный квадрат должен начать вращение.
Итак, приступим. Создайте у себя на компьютере файл с названием index.html и напишите следующий код:
В файле index.html мы сделали стандартную html разметку и в body создали div с классом rotate. Также мы подключили между тегами head файл style.css.
Давайте зададим ему стили, для того, чтобы применить к нему эффект вращения.
Создайте файл style.css и вставьте в него следующий текст:
Для красоты мы добавили CSS3 фильтр grayscale, делающий наш div черно-белый. О фильтрах css мы поговорим в следующих статьях.
Для совместимости с другими браузерами, мы добавили -webkit-transform, ms-transition и ms-transform.
Наведите курсор мыши на красный квадрат(или коснитесь пальцем в мобильном устройстве) и посмотрите результат.
В этом видеоуроке, мы писали код в редакторе SublimeText3 с плагином Emmet. Подробнее об этом замечательном редакторе и плагине Emmet вы можете прочитать в нашей статье: Sublime Text 3 - удобный редактор кода для веб-разработчиков
Вступайте в нашу группу VK и следите за новыми статьями.
XAMPP - как установить и настроить на Mac (Mojave, Sierra)
Как самостоятельно изучить веб-программирование
Что такое реферальный спам в Google Analytics
Постраничная ленивая загрузка (lazy load) постов
Как стать профессиональным веб-разработчиком
Методы setTimeout и setInterval в Javascript
Реализация Lazy Load на Jquery
Три полезных CSS свойства для работы с изображениями
Sublime Text 3 - удобный редактор кода для веб-разработчиков
Установка и настройка веб-сервера для сайта в Ubuntu
Полезные приложения для веб-разработчиков в Google Chrome
GIT команды: Быстрый старт для новичков
Что такое конструктор в объектно-ориентированном программировании
Что такое объектно-ориентированное программирование
Как отправить форму без перезагрузки страницы (AJAX)
Как быстро создать сайт и привлечь поисковый трафик
Bitbucket: Крутой облачный GIT репозиторий
Javascript: Классы в Javascript
Что такое веб-хостинг и как выбрать хостинг для сайта
SQL запросы: Основы администрирования MySQL
Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.
