Pure CSS3 Cool Full screen 3D cube rotation show slideshow effects

This is a very cool effect of pure CSS3 full screen 3D cube rotation display slideshow effect. The slide uses a full-screen 3D cube as the carrier of the slide, through the up and down navigation buttons, you can rotate the cube vertically, the cube on each side of the slide pictures displayed, the effect is very cool.

Online preview Source Download

How to useHTML Structure

The cube structure of the slide uses an unordered list to make, and each <li> element is a polygon of a cube. The top and bottom navigation buttons for slides use radio radio buttons and label to make. The entire 3D cube slide is wrapped in a div container.

12345678910111213141516171819202122

<div class="buttons-wrapper">  <input id="slide1" type="radio" name="slider" checked>  <input id="slide2" type="radio" name="slider">  <input id="slide3" type="radio" name="slider">  <input id="slide4" type="radio" name="slider">  <ul class="slider">  <li>    <div class="caption">      <h3>Maserati GranTurismo</h3>      <p>......</a>      </p>    </div>  </li>  ......  </ul>  <label for="slide1"></label>  <label for="slide2"></label>  <label for="slide3"></label>  <label for="slide4"></label></div>

CSS Styles

You want to change the picture in the demo, you can find the following code in SKIN.MIN.CSS, change the address of the image.

123456789101112131415

body .buttons-wrapper .slider > li:nth-child(1) {  background: url(1.jpg) no-repeat center center;}body .buttons-wrapper .slider > li:nth-child(2) {  background: url(2.jpg) no-repeat center center;}body .buttons-wrapper .slider > li:nth-child(3) {  background: url(3.jpg) no-repeat center center;}body .buttons-wrapper .slider > li:nth-child(4) {  background: url(4.jpg) no-repeat center center;}

Pure CSS3 Cool Full screen 3D cube rotation show slideshow effects