Страница 1 из 11
Форум про uCoz » Все для вебмастера » Уроки Веб-мастера » Вращение объекта или надпись на CSS3
Вращение объекта или надпись на CSS3
Kosten
Дата: Понедельник, 26.12.2016, 07:47 | Сообщение # 1
Администраторы
Сообщений:13732
Награды: 47


Сейчас это уже не сюрприз на разные эффекты, которые делаются на различные объекты на сайте. Это также может быть изображение или надпись, но главное чтоб было красиво и оригинально. Что здесь можно сделать на CSS3. Где как раз рассмотрим одну их них, вообщем он состоит из того, вы кликом наводите и он можно сказать отпрыгивает в правую сторону.

Здесь вам представлена демонстрация, где простая надпись.

Код:

Код
<a href="#">Наведи на меня!</a>


CSS:

Код
a {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: block;
  position: absolutle;
  width: 100px;
  height: 100px;
}

a:hover {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=1);
}


PS - теперь это можно делать при помощи css3 (transform:rotate), для старых версий IE от 8 и ниже ничего не будет видно, так как он древний, и не поддерживает css3.
Kosten
Дата: Понедельник, 26.12.2016, 07:51 | Сообщение # 2
Администраторы
Сообщений:13732
Награды: 47


Таблица CSS3

Форум про uCoz » Все для вебмастера » Уроки Веб-мастера » Вращение объекта или надпись на CSS3
Страница 1 из 11
Поиск: