+7 (911) 913-40---
menu
person

20:43
Слайдер

ДЕМО

<style>
.gallery {
width:490px;  height:140px;  padding-top:350px;  position:relative;  margin:50px auto;
}
.gallery form {padding:0; margin:0;}
.gallery input {position:absolute; left:-9999px;}
.gallery label {
display:block;  width:88px;  height:66px;  float:left;  margin:5px;  opacity:0.7;
-webkit-transition:0.25s;
-o-transition:0.25s;
transition:0.25s;
}
.gallery label:hover {opacity:1;}
.gallery input + img {
position:absolute;  left:50%;  top:0;  z-index:50;  margin-left:-200px;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-o-backface-visibility:hidden;
backface-visibility:hidden;
-webkit-transform-origin:50% 50% -200px;
-o-transform-origin:50% 50% -200px;
transform-origin:50% 50% -200px;
}
.gallery label img {width:88px; margin:0;}
.gallery input:checked + img
{
opacity:1;
-webkit-animation:spin1 1s forwards linear; z-index:100;
-o-animation:spin1 1s forwards linear; z-index:100;
animation:spin1 1s forwards linear; z-index:100;
}
.gallery input:not(:checked) + img
{
-webkit-animation:spin2 1s forwards linear;
-o-animation:spin2 1s forwards linear;
animation:spin2 1s forwards linear;
}
@-webkit-keyframes spin1 {
0% {-webkit-transform: perspective(1200px) rotateY(-90deg);}
100% {-webkit-transform: perspective(1200px) rotateY(0deg);}
}
@-webkit-keyframes spin2 {
0% {-webkit-transform: perspective(1200px) rotateY(0deg);}
100% {-webkit-transform: perspective(1200px) rotateY(90deg);}
}
@-o-keyframes spin1 {
0% {-o-transform: perspective(1200px) rotateY(-90deg);}
100% {-o-transform: perspective(1200px) rotateY(0deg);}
}
@-o-keyframes spin2 {
0% {-o-transform: perspective(1200px) rotateY(0deg);}
100% {-o-transform: perspective(1200px) rotateY(90deg);}
}
@keyframes spin1 {
0% {transform: perspective(1200px) rotateY(-90deg);}
100% {transform: perspective(1200px) rotateY(0deg);}
}
@keyframes spin2 {
0% {transform: perspective(1200px) rotateY(0deg);}
100% {transform: perspective(1200px) rotateY(90deg);}
}
</style>
<div class="gallery">
<form action="">
<input type="radio" name="book" id="p1" checked="checked" />
<img src="http://www.novickiy.ru/_ph/2/2/188720830.jpg?1406996928" alt="" />
<input type="radio" name="book" id="p2" />
<img src="http://www.novickiy.ru/_ph/2/2/308060875.jpg?1406996941" alt="" />
<input type="radio" name="book" id="p3" />
<img src="http://www.novickiy.ru/_ph/3/2/591314717.jpg?1406997016" alt="" />
<input type="radio" name="book" id="p4" />
<img src="http://www.novickiy.ru/_ph/1/2/314747468.jpg?1406997195" alt="" />
<input type="radio" name="book" id="p5" />
<img src="http://www.novickiy.ru/_ph/1/2/42837617.jpg?1406997201" alt="" />
<input type="radio" name="book" id="p6" />
<img src="http://www.novickiy.ru/_ph/6/2/862813091.jpg?1406997315" alt="" />
<input type="radio" name="book" id="p7" />
<img src="http://www.novickiy.ru/_ph/6/2/18797724.jpg?1406997314" alt="" />
<input type="radio" name="book" id="p8" />
<img src="http://www.novickiy.ru/_ph/8/2/770126340.jpg?1406997414" alt="" />
<input type="radio" name="book" id="p9" />
<img src="http://www.novickiy.ru/_ph/8/2/782371487.jpg?1406997417" alt="" />
<input type="radio" name="book" id="p10" />
<img src="http://www.novickiy.ru/_ph/8/2/599836683.jpg?1406997419" alt="" />
<label for="p1">
<img src="http://www.novickiy.ru/_ph/2/2/188720830.jpg?1406996928" alt="" />
</label>
<label for="p2">
<img src="http://www.novickiy.ru/_ph/2/2/308060875.jpg?1406996941" alt="" />
</label>
<label for="p3">
<img src="http://www.novickiy.ru/_ph/3/2/591314717.jpg?1406997016" alt="" />
</label>
<label for="p4">
<img src="http://www.novickiy.ru/_ph/1/2/314747468.jpg?1406997195" alt="" />
</label>
<label for="p5">
<img src="http://www.novickiy.ru/_ph/1/2/42837617.jpg?1406997201" alt="" />
</label>
<label for="p6">
<img src="http://www.novickiy.ru/_ph/6/2/862813091.jpg?1406997315" alt="" />
</label>
<label for="p7">
<img src="http://www.novickiy.ru/_ph/6/2/18797724.jpg?1406997314" alt="" />
</label>
<label for="p8">
<img src="http://www.novickiy.ru/_ph/8/2/770126340.jpg?1406997414" alt="" />
</label>
<label for="p9">
<img src="http://www.novickiy.ru/_ph/8/2/782371487.jpg?1406997417" alt="" />
</label>
<label for="p10">
<img src="http://www.novickiy.ru/_ph/8/2/599836683.jpg?1406997419" alt="" />
</label>
</form>
</div>

 

 

 

Категория: Веб дизайн | Просмотров: 2662 | Добавил: artnov
3 голоса

Всего комментариев: 0
avatar