воскресенье, 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 коммент.:
Отправить комментарий