3D Gallery 2 | SPAN GmbH & Co.KG, Illerrieden

<style>/* ================================================================ This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at https://www.cssplay.co.uk/menu/cssplay-animated-cube-gallery.html Copyright (c) Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .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><head>  </head> <body> <div class="gallery"> <form action=""> <input type="radio" name="book" id="p1" checked="checked" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p2" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p3" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p4" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p5" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p6" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p7" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p8" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p9" /><img src="https://placehold.it/400x300" alt="" /> <input type="radio" name="book" id="p10" /><img src="https://placehold.it/400x300" alt="" /> <label for="p1"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p2"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p3"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p4"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p5"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p6"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p7"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p8"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p9"><img src="https://placehold.it/100x100" alt="" /></label> <label for="p10"><img src="https://placehold.it/100x100" alt="" /></label> </form> </div> </body> </html><script></script>