<div class="container"> <input type="radio" name="tab" id="tab1" class="itabs" checked="checked" /> <input type="radio" name="tab" id="tab2" class="itabs" /> <input type="radio" name="tab" id="tab3" class="itabs" /> <input type="radio" name="tab" id="tab4" class="itabs" /> <div class="slideshow"> <div class="pic1"> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p1.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p2.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p3.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p4.jpg" alt="" /> </div> <div class="pic2"> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p5.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p6.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p7.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p8.jpg" alt="" /> </div> <div class="pic3"> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p9.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p10.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p11.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p12.jpg" alt="" /> </div> <div class="pic4"> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p13.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p14.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p15.jpg" alt="" /> <img src="http://www.cssplay.co.uk/menu/rotaryslide/p16.jpg" alt="" /> </div> </div> <label for="tab1" class="tabs pos1" accesskey="1"><img src="http://www.cssplay.co.uk/menu/rotaryslide/arrow.gif" alt="" /></label> <label for="tab2" class="tabs pos2" accesskey="2"><img src="http://www.cssplay.co.uk/menu/rotaryslide/arrow.gif" alt="" /></label> <label for="tab3" class="tabs pos3" accesskey="3"><img src="http://www.cssplay.co.uk/menu/rotaryslide/arrow.gif" alt="" /></label> <label for="tab4" class="tabs pos4" accesskey="4"><img src="http://www.cssplay.co.uk/menu/rotaryslide/arrow.gif" alt="" /></label> </div>
.slideshow {width:750px; height:400px;} .slideshow div {width:180px; height:270px; position:absolute; background:#f9f9f9; border:10px solid #fff; top:10px; overflow:hidden;} .slideshow div.pic1 {left:-10px; z-index:100; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } .slideshow div.pic2 {left:180px; z-index:90; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } .slideshow div.pic3 {left:370px; z-index:80; -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -o-transform: rotate(5deg); transform: rotate(5deg); } .slideshow div.pic4 {left:560px; z-index:70; -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -ms-transform: rotate(-5deg); -o-transform: rotate(-5deg); transform: rotate(-5deg); } .slideshow div img {display:block; position:absolute; left:0; top:0; -webkit-transform-origin:90px 600px; -moz-transform-origin:90px 600px; -ms-transform-origin:90px 600px; -o-transform-origin:90px 600px; transform-origin:90px 600px; -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } #tab1:checked ~ .slideshow .pic1 img:nth-of-type(1), #tab2:checked ~ .slideshow .pic1 img:nth-of-type(2), #tab3:checked ~ .slideshow .pic1 img:nth-of-type(3), #tab4:checked ~ .slideshow .pic1 img:nth-of-type(4) { -webkit-transition: 0.6s 0.9s; -moz-transition: 0.6s 0.9s; -ms-transition: 0.6s 0.9s; -o-transition: 0.6s 0.9s; transition: 0.6s 0.9s; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } #tab1:checked ~ .slideshow .pic2 img:nth-of-type(1), #tab2:checked ~ .slideshow .pic2 img:nth-of-type(2), #tab3:checked ~ .slideshow .pic2 img:nth-of-type(3), #tab4:checked ~ .slideshow .pic2 img:nth-of-type(4) { -webkit-transition: 0.6s 0.6s; -moz-transition: 0.6s 0.6s; -ms-transition: 0.6s 0.6s; -o-transition: 0.6s 0.6s; transition: 0.6s 0.6s; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } #tab1:checked ~ .slideshow .pic3 img:nth-of-type(1), #tab2:checked ~ .slideshow .pic3 img:nth-of-type(2), #tab3:checked ~ .slideshow .pic3 img:nth-of-type(3), #tab4:checked ~ .slideshow .pic3 img:nth-of-type(4) { -webkit-transition: 0.6s 0.3s; -moz-transition: 0.6s 0.3s; -ms-transition: 0.6s 0.3s; -o-transition: 0.6s 0.3s; transition: 0.6s 0.3s; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } #tab1:checked ~ .slideshow .pic4 img:nth-of-type(1), #tab2:checked ~ .slideshow .pic4 img:nth-of-type(2), #tab3:checked ~ .slideshow .pic4 img:nth-of-type(3), #tab4:checked ~ .slideshow .pic4 img:nth-of-type(4) { -webkit-transition: 0.6s; -moz-transition: 0.6s; -ms-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg); } #tab1:checked ~ .slideshow .pic1 img:nth-of-type(4), #tab2:checked ~ .slideshow .pic1 img:nth-of-type(1), #tab3:checked ~ .slideshow .pic1 img:nth-of-type(2), #tab4:checked ~ .slideshow .pic1 img:nth-of-type(3) { -webkit-transition: 0.6s 1.05s; -moz-transition: 0.6s 1.05s; -ms-transition: 0.6s 1.05s; -o-transition: 0.6s 1.05s; transition: 0.6s 1.05s; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); transform:rotate(-30deg); } #tab1:checked ~ .slideshow .pic2 img:nth-of-type(4), #tab2:checked ~ .slideshow .pic2 img:nth-of-type(1), #tab3:checked ~ .slideshow .pic2 img:nth-of-type(2), #tab4:checked ~ .slideshow .pic2 img:nth-of-type(3) { -webkit-transition: 0.6s 0.75s; -moz-transition: 0.6s 0.75s; -ms-transition: 0.6s 0.75s; -o-transition: 0.6s 0.75s; transition: 0.6s 0.75s; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); transform:rotate(-30deg); } #tab1:checked ~ .slideshow .pic3 img:nth-of-type(4), #tab2:checked ~ .slideshow .pic3 img:nth-of-type(1), #tab3:checked ~ .slideshow .pic3 img:nth-of-type(2), #tab4:checked ~ .slideshow .pic3 img:nth-of-type(3) { -webkit-transition: 0.6s 0.45s; -moz-transition: 0.6s 0.45s; -ms-transition: 0.6s 0.45s; -o-transition: 0.6s 0.45s; transition: 0.6s 0.45s; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); transform:rotate(-30deg); } #tab1:checked ~ .slideshow .pic4 img:nth-of-type(4), #tab2:checked ~ .slideshow .pic4 img:nth-of-type(1), #tab3:checked ~ .slideshow .pic4 img:nth-of-type(2), #tab4:checked ~ .slideshow .pic4 img:nth-of-type(3) { -webkit-transition: 0.6s 0.15s; -moz-transition: 0.6s 0.15s; -ms-transition: 0.6s 0.15s; -o-transition: 0.6s 0.15s; transition: 0.6s 0.15s; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); -ms-transform:rotate(-30deg); -o-transform:rotate(-30deg); transform:rotate(-30deg); } #tab1:checked ~ .slideshow .pic1 img:nth-of-type(3), #tab2:checked ~ .slideshow .pic1 img:nth-of-type(4), #tab3:checked ~ .slideshow .pic1 img:nth-of-type(1), #tab4:checked ~ .slideshow .pic1 img:nth-of-type(2), #tab1:checked ~ .slideshow .pic2 img:nth-of-type(3), #tab2:checked ~ .slideshow .pic2 img:nth-of-type(4), #tab3:checked ~ .slideshow .pic2 img:nth-of-type(1), #tab4:checked ~ .slideshow .pic2 img:nth-of-type(2), #tab1:checked ~ .slideshow .pic3 img:nth-of-type(3), #tab2:checked ~ .slideshow .pic3 img:nth-of-type(4), #tab3:checked ~ .slideshow .pic3 img:nth-of-type(1), #tab4:checked ~ .slideshow .pic3 img:nth-of-type(2), #tab1:checked ~ .slideshow .pic4 img:nth-of-type(3), #tab2:checked ~ .slideshow .pic4 img:nth-of-type(4), #tab3:checked ~ .slideshow .pic4 img:nth-of-type(1), #tab4:checked ~ .slideshow .pic4 img:nth-of-type(2) { -webkit-transition: 0s 1.7s; -moz-transition: 0s 1.7s; -ms-transition: 0s 1.7s; -o-transition: 0s 1.7s; transition: 0s 1.7s; -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); -ms-transform:rotate(30deg); -o-transform:rotate(30deg); transform:rotate(30deg); } .container input {position:absolute; left:-9999px;} .container {width:750px; height:400px; margin:50px auto; position:relative; background:#fff;} .container label.tabs {display:block; width:50px; height:90px; position:absolute; left:350px; top:320px; z-index:300; cursor:pointer; -moz-transition: 0s 1.7s; -ms-transition: 0s 1.7s; -o-transition: 0s 1.7s; -webkit-transition: 0s 1.7s; transition: 0s 1.7s; } #tab1:checked ~ label.pos2 {z-index:400;} #tab2:checked ~ label.pos3 {z-index:400;} #tab3:checked ~ label.pos4 {z-index:400;} #tab4:checked ~ label.pos1 {z-index:400;}