ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

Библиотека javascript SE@RCHER ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. ЯНВАРЬ >>>

HTML ↴

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Горизонтальное меню при наведении на пункт меню он анимационно зачеркнут (CSS3  transition)</title>
<style type="text/css">
/* Основные стили меню */
.block-menu {
	display: block;
	background: #000;
}

.block-menu li {
	display: inline-block;
}

.block-menu li a {
	color: #fff;
	display: block;
	text-decoration: none;
	font-family: 'Russo One',Arial,sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-transform: uppercase;
	overflow: visible;
	line-height: 20px;
	font-size: 22px;
	padding: 15px 10px;
}

/* Анимация */
.three-d {
	-webkit-perspective: 200px;
	-moz-perspective: 200px;
	perspective: 200px;
	-webkit-transition: all .07s linear;
	-moz-transition: all .07s linear;
	transition: all .07s linear;
	position: relative;
}

.three-d:not(.active):hover {
cursor: pointer;
	}

.three-d:not(.active):hover .three-d-box, 
	.three-d:not(.active):focus .three-d-box {
-moz-transform: translateZ(-25px) rotateX(90deg);
-webkit-transform: translateZ(-25px) rotateX(90deg);
-o-transform: translateZ(-25px) rotateX(90deg);
transform: translateZ(-25px) rotateX(90deg);
	}

.three-d-box {
	-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
	-webkit-transform: translatez(-25px);
	-moz-transform: translatez(-25px);
	-o-transform: translatez(-25px);
	transform: translatez(-25px);
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.front {
	-webkit-transform: rotatex(0deg) translatez(25px);
	-moz-transform: rotatex(0deg) translatez(25px);
	-o-transform: rotatex(0deg) translatez(25px);
	transform: rotatex(0deg) translatez(25px);
}

.back {
	-webkit-transform: rotatex(-90deg) translatez(25px);
	-moz-transform: rotatex(-90deg) translatez(25px);
	-o-transform: rotatex(-90deg) translatez(25px);
	transform: rotatex(-90deg) translatez(25px);
	color: #FFE7C4;
}

.front, .back {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: black;
	padding: 15px 10px;
	color: white;
	pointer-events: none;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
	</style>
</head>
<body>

<h1>Меню с 3D анимацией на CSS</h1>
	<p>Наводим курсор мыши на пункт меню для демонстрации 3D эффекта!</p>
	<ul class="block-menu">
<li><a href="https://www.03www.ru/" class="three-d">
	Главная
	<span class="three-d-box"><span class="front">Главная</span><span class="back">Начнем</span></span>
</a></li>
<li><a href="https://www.03www.ru/" class="three-d">
	 Демо 
	<span class="three-d-box"><span class="front">Демо</span><span class="back">Ух ты!</span></span>
</a></li>
<li><a href="https://www.03www.ru/" class="three-d">
	Уроки
	<span class="three-d-box"><span class="front">Уроки</span><span class="back">Учись</span></span>
</a></li>
<li><a href="https://www.03www.ru/" class="three-d">
	   О нас   
	<span class="three-d-box"><span class="front">О нас</span><span class="back">Кто мы?</span></span>
</a></li>
	</ul>
 <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(53156500, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/53156500" style="position:absolute; left:-9999px;" alt="" /></div></noscript> </body>
</html>

ИЗБРАННЫЕ ПРИМЕРЫ JAVASCRIPT+CSS 2013 года

HTML ↴

размер Kb

ПРИМЕР ↴

✔ пример в полном окне