Красивый 3D эффект для ссылок на CSS3

  Александр Маврин   12 комментариев

ПРОСТОЙ СПОЙЛЕР ДЛЯ САЙТАЗдравствуйте. Читая один из зарубежных сайтов, обнаружил, что ссылки на нем очень интересно оформлены, с использованием трехмерного эффекта. Сначала я подумал, что это сделано с использованием JavaScript, но заглянув в код обнаружил, что все это написано на CCS3. Если кому-то приглянулась эта забавная фишка, то установить ее себе на сайт не составит особого труда. Вот, как это выглядит:

Демо

Сами ссылки на странице оформляются таким образом:

<a class="external roll-link" href="#"><span data-title="ссылка">ссылка</span></a>

А CSS код для эффекта выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.roll-link {
 display: inline-block;
 overflow: hidden;
 text-decoration:none;
 vertical-align: top;
 -webkit-perspective: 600px;
 -moz-perspective: 600px;
 -ms-perspective: 600px;
 perspective: 600px;
 
 -webkit-perspective-origin: 50% 50%;
 -moz-perspective-origin: 50% 50%;
 -ms-perspective-origin: 50% 50%;
 perspective-origin: 50% 50%;      
}
 
.roll-link:hover {text-decoration:none;}
 
.roll-link span {
 display: block;
 position: relative;
 padding: 0 2px;
 
 -webkit-transition: all 400ms ease;
 -moz-transition: all 400ms ease;
 -ms-transition: all 400ms ease;
 transition: all 400ms ease;
 
 -webkit-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
}
.roll-link:hover span {
  background: #DD4D42;
 -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
 -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
 -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
 transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}
 
.roll-link span:after {
 content: attr(data-title);
 display: block;
 position: absolute;
 left: 0;
 top: 0;
 padding: 0 2px;
 color: #fff;
 background: #DD4D42;
 
 -webkit-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 transform-origin: 50% 0%;
 
 -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
 -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
 -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
 transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

Прошу обратить внимание, что данный эффект работает не во всех браузерах. В опере и IE работать не хочет. В Хроме, FF и им подобным — работает хорошо.

Как вы уже заметили, в CSS3 появились такие свойства, как перспектива и 3D. Очень надеюсь, что не за горами тот день. когда все браузеры научатся понимать все свойства и значения CSS3. Но а пока приходится довольствоваться тем, что у нас есть сейчас и это тоже достижение, если не сказать больше. Если эта тема вам близка, пишите на форуме, обсудим.

Не стесняйтесь делиться записью в социальных сетях. Спасибо

12 комментариев
  1. Находка — супер, спасибо автор!
    Сейчас буду пытаться прикрутить это к своим ссылкам))

  2. Очень интересно. Обязательно попробую.

  3. Приветствую, тёзка) А куда и что вставлять? Что с этим кодом делать-то?

  4. начинаю постигать эти не земные понятия))) скажи куда вставлять….а я постараюсь разобраться, а не получиться….напишуууу)))

    • Обсуждать конечно лучше на форуме.
      Код CSS вставить нужно в файл style.css, который у тебя находится по этому адресу:

      /wp-content/themes/device/style.css

      А сами ссылки оформлять способом, который описан выше.

  5. Вопрос, а не проще ли использовать jQuery-плагин для подобных манипуляций?

    В большинстве популярных CMS используется библиотека (jQuery или аналог), логичнее было бы ей и пользоваться. И обновлять проще, и сами вставки куда меньше.

  6. У меня получилось вставить на Джумлу в заголовок новости, спасибо, пример на сайте

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *