Добрый день.Сейчас мы рассмотрим
Работающую галерею в виде фотоальбома на СSS3 для сайта ucoz .
Установка как всегда невероятно проста:
Устанавливаем в любое место:
Код
<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://delaisait.ucoz.ru/script/img/gallery/1.jpg" alt="" />
<input type="radio" name="book" id="p2" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/2.jpg" alt="" />
<input type="radio" name="book" id="p3" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/3.jpg" alt="" />
<input type="radio" name="book" id="p4" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/4.jpg" alt="" />
<input type="radio" name="book" id="p5" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/5.jpg" alt="" />
<input type="radio" name="book" id="p6" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/6.jpg" alt="" />
<input type="radio" name="book" id="p7" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/7.jpg" alt="" />
<input type="radio" name="book" id="p8" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/8.jpg" alt="" />
<input type="radio" name="book" id="p9" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/9.jpg" alt="" />
<input type="radio" name="book" id="p10" />
<img src="http://delaisait.ucoz.ru/script/img/gallery/10.jpg" alt="" />
<label for="p1">
<img src="http://delaisait.ucoz.ru/script/img/gallery/1.jpg" alt="" />
</label>
<label for="p2">
<img src="http://delaisait.ucoz.ru/script/img/gallery/2.jpg" alt="" />
</label>
<label for="p3">
<img src="http://delaisait.ucoz.ru/script/img/gallery/3.jpg" alt="" />
</label>
<label for="p4">
<img src="http://delaisait.ucoz.ru/script/img/gallery/4.jpg" alt="" />
</label>
<label for="p5">
<img src="http://delaisait.ucoz.ru/script/img/gallery/5.jpg" alt="" />
</label>
<label for="p6">
<img src="http://delaisait.ucoz.ru/script/img/gallery/6.jpg" alt="" />
</label>
<label for="p7">
<img src="http://delaisait.ucoz.ru/script/img/gallery/7.jpg" alt="" />
</label>
<label for="p8">
<img src="http://delaisait.ucoz.ru/script/img/gallery/8.jpg" alt="" />
</label>
<label for="p9">
<img src="http://delaisait.ucoz.ru/script/img/gallery/9.jpg" alt="" />
</label>
<label for="p10">
<img src="http://delaisait.ucoz.ru/script/img/gallery/10.jpg" alt="" />
</label>
</form>
</div>
Галерея в рабочем состоянии:
+11