Здравствуйте. Читая один из зарубежных сайтов, обнаружил, что ссылки на нем очень интересно оформлены, с использованием трехмерного эффекта при наведении. Сначала я подумал, что это сделано с использованием JavaScript, но заглянув в код обнаружил, что все это написано на CCS3. Если кому-то приглянулась эта забавная фишка, то установить ее себе на сайт не составит особого труда. Вот, как это выглядит:
Демо
Сами ссылки на странице оформляются таким образом:
<a class="external roll-link" href="#"><span data-title="ссылка">ссылка</span></a> |
<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 );
} |
.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. Но а пока приходится довольствоваться тем, что у нас есть сейчас и это тоже достижение, если не сказать больше. Вот таким способом можно делать CSS эффекты при наведении на ссылку курсора.
1196![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
Находка — супер, спасибо автор!
Сейчас буду пытаться прикрутить это к своим ссылкам))
Пожалуйста. 🙂
Очень интересно. Обязательно попробую.
Пробуйте. Должно получиться.
Приветствую, тёзка) А куда и что вставлять? Что с этим кодом делать-то?
Привет. В HTML и CSS хоть немного разбираешься?
начинаю постигать эти не земные понятия))) скажи куда вставлять….а я постараюсь разобраться, а не получиться….напишуууу)))
Обсуждать конечно лучше на forum.serblog.ru.
Код CSS вставить нужно в файл style.css, который у тебя находится по этому адресу:
А сами ссылки оформлять способом, который описан выше.
Вопрос, а не проще ли использовать jQuery-плагин для подобных манипуляций?
В большинстве популярных CMS используется библиотека (jQuery или аналог), логичнее было бы ей и пользоваться. И обновлять проще, и сами вставки куда меньше.
Может быть и проще, но здесь написано о возможностях CSS.
Поделитесь кодом плагина, который делает такой эффект для ссылок.
У меня получилось вставить на Джумлу в заголовок новости, спасибо, пример на сайте
Ага, видел. Нормально. 😉