Делаем «3D» ссылки

Сделать вот такую красивую ссылку достаточно просто.

Скажу сразу, работает только в Chrome и FF, ну и почти в IE10, Opera отказалась.

1. Делаем конструкцию <a><span data-title="название ссылки">название ссылки</span></a>

2. Добавляем в css следущее:

Для тега <a>:

	a {
		display: inline-block;
		overflow: hidden;
		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%;
	}

Для тега <span>:

	a 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;
	}

Делаем hover на ссылку для span'a:

	a:hover span {
		background: #069;
		-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 );
	}

Добавляем :after для span'a, чтобы был виден текст после ховера на ссылке:

	a span:after {
		content: attr(data-title);
		display: block;
		position: absolute;
		left: 0;top: 0;
		padding: 0 2px;
		color: white;
		background: #069;
		-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 );
	}

Вот тут подробно и с теорией