воскресенье, 5 февраля 2017 г.

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


ПРОСТОЙ СПОЙЛЕР ДЛЯ САЙТАЗдравствуйте. Читая один из зарубежных сайтов, обнаружил, что ссылки на нем очень интересно оформлены, с использованием трехмерного эффекта. Сначала я подумал, что это сделано с использованием 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. Но а пока приходится довольствоваться тем, что у нас есть сейчас и это тоже достижение, если не сказать больше. Если эта тема вам близка,пишите на форуме, обсудим.

0 коммент.:

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