CSS3 - Эффект вращения
CSS3 - это таблица каскадных стилей с большими возможностями. С помощью CSS3 на сайте можно создавать анимацию и даже делать игры. В этой статье мы расскажем о том, как сделать эффект вращения с помощью CSS3.
Web-hosting rating: 8 out of 10 with 325 ratings

Как сделать эффект вращения на 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 защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.



Комментарии





Ярослав ответить
Интересно, спасибо, особенно, как делать игры с помощью css3. Надеюсь расскажите.
Anonymous ответить
Спасибо, интересная статья!
tranonProw ответить
Спасибо!
charnoEa ответить
Я согласен с Вами, спасибо за помощь в этом вопросе. Как всегда все гениальное просто.

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









Поиск хостинга



HDD (mb)
8000
Максимальная цена за месяц, (RUB)
700

Дополнительно







Новые статьи

















ВСЕ СТАТЬИ


Обзоры хостинга















Категории


24x7 Support Web Hosting
Angular JS Web Hosting
Apache Web Hosting
ASP.NET Web Hosting
CPanel Web Hosting
Cron Web Hosting
DirectAdmin Web Hosting
Django Web Hosting
EMail Web Hosting
FireBird Web Hosting
Free Domain Web Hosting
GIT Web Hosting
Jabber Web Hosting
Java Web Hosting
JavaScript Web Hosting
JBoss Web Hosting
JSP Web Hosting
Linux Web Hosting
MERCURIAL Web Hosting
MongoDB Web Hosting
MySQL Web Hosting
NGinx Web Hosting
NodeJS Web Hosting
Perl Web Hosting
PHP Web Hosting
PostgreSQL Web Hosting
Python Web Hosting
Ruby Web Hosting
Russian Web Hosting
Servlets Web Hosting
Spring Web Hosting
SQLite Web Hosting
SSH Web Hosting
SSL Web Hosting
Stream Web Hosting
SVN Web Hosting
TomCat Web Hosting
Unlimited HDD Space Web Hosting
Unlimited Sites Web Hosting
Unlimited Traffic Web Hosting
USA Web Hosting
VmWare Web Hosting
Windows Web Hosting