<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>