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

Март 27, 2013   Александр Маврин   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 не будет опубликован. Обязательные поля помечены *