★ Caroussel Img Rotate Light 3D ★

<div class="rotate"> <style><!-- width: 320px; height: 279px; } .image { width: 100%; height: 100%; } *{box-sizing : border-box} img{max-width:100%} .contenu_carou_auto{ margin:2rem auto; width:320px; height:279px; perspective:8000px } .caroussel-image{ animation:rotation 64s infinite alternate linear; transform-style:preserve-3d; position:relative; } .caroussel-image img{ position: absolute; top:0; left: 0; } .caroussel-image img{ filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4)); width:400px; height:266px; left:10px; outline:1px solid transparent; backface-visibility:hidden border: 3px inset rgba(0,100,0); box-shadow: 0 0 15px 3px rgba(124,252,0); } .caroussel-image img:nth-child(1){ transform:translate3d(0,0,395px) } .caroussel-image img:nth-child(2){ transform:rotateY(45deg) translateZ(395px) } .caroussel-image img:nth-child(3){ transform:rotateY(90deg) translateZ(395px) } .caroussel-image img:nth-child(4){ transform:rotateY(135deg) translateZ(395px) } .caroussel-image img:nth-child(5){ transform:rotateY(180deg) translateZ(395px) } .caroussel-image img:nth-child(6){ transform:rotateY(225deg) translateZ(395px) } .caroussel-image img:nth-child(7){ transform:rotateY(270deg) translateZ(395px) } .caroussel-image img:nth-child(8){ transform:rotateY(315deg) translateZ(395px) } @keyframes rotation{ from{transform:rotatey(0)} to{transform:rotatey(1turn)}} > --></style> <div class="contenu_carou_auto"> <div class="caroussel-image"><img src="http://ekladata.com/W_4yWt8xvyjqTFt0puwydbolwCQ@900x720.jpg" alt="Buns 01" /> <img src="http://ekladata.com/s7Wg4VNJX0QK9KU1lUTE76NJ44E@900x630.jpg" alt="Buns 02" /> <img src="http://ekladata.com/rKzqOZQKIDiqWayCsQ3UAbwge9M@800x349.jpg" alt="Buns 03" /> <img src="http://ekladata.com/flcUL2IffG-4W3X613bcNL6q4GM@800x580.jpg" alt="Buns 04" /> <img src="http://ekladata.com/CEeq2tUdnn7W0qOihpPHLQqKdQc@800x500.jpg" alt="Buns 05" /> <img src="http://ekladata.com/7GF9SngJHdeduEDJsMaYGxXpwaU@800x600.jpg" alt="Buns 06" /> <img src="http://ekladata.com/5lVKHNGgbECuiM-PXIojB3MK-Vo@800x578.jpg" alt="Buns 07" /> <img src="http://ekladata.com/AO_lk35sYHo7BFDDM6Tid8g4NM8@800x531.jpg" alt="Buns 08" /></div> </div> </div>