3D CUDE SLIDESHOW-2 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<style>
.title {text-align: center;color: #333;font: 24px Helvetica, Arial, serif;}
.creds {text-align: center;color: #666;font: 12px Helvetica, Arial, serif;}
.creds a {color: #000;text-decoration: none;border-bottom: 1px dotted #000;}
.three-d-container{margin:30px auto;width:300px;height:300px;border-radius: 3px;position:relative;
-webkit-perspective:1000px;
   -moz-perspective:1000px;
    -ms-perspective:1000px;
     -o-perspective:1000px;
        perspective:1000px;
-webkit-box-shadow:0 20px 60px rgba(0,0,0,0.2),          0 0 40px rgba(0,0,0,0.2) inset;
   -moz-box-shadow:0 20px 60px rgba(0,0,0,0.2),          0 0 40px rgba(0,0,0,0.2) inset;
        box-shadow:0 20px 60px rgba(0,0,0,0.2),          0 0 40px rgba(0,0,0,0.2) inset;}
.three-d-cube{width:100%;height:100%;position:absolute;
-webkit-transition:-webkit-transform 1s;
   -moz-transition:   -moz-transform 1s;
     -o-transition:     -o-transform 1s;
        transition:        transform 1s;
-webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
     -o-transform-style:preserve-3d;
        transform-style:preserve-3d;
-webkit-transform:translateZ( -150px );
   -moz-transform:translateZ( -150px );
    -ms-transform:translateZ( -150px );
     -o-transform:translateZ( -150px );
        transform:translateZ( -150px );}
.three-d-cube .three-d-item{width:100%;height:100%;display:block;margin:0;position:absolute;}
.three-d-cube .three-d-item img{width:100%;height:100%;display:block;margin:0;}
.three-d-item:nth-child(1){
-webkit-transform:rotateY(   0deg ) translateZ( 150px );
   -moz-transform:rotateY(   0deg ) translateZ( 150px );
    -ms-transform:rotateY(   0deg ) translateZ( 150px );
     -o-transform:rotateY(   0deg ) translateZ( 150px );
        transform:rotateY(   0deg ) translateZ( 150px );
}
.three-d-item:nth-child(2){
-webkit-transform:rotateX( 180deg ) translateZ( 150px );
   -moz-transform:rotateX( 180deg ) translateZ( 150px );
    -ms-transform:rotateX( 180deg ) translateZ( 150px );
     -o-transform:rotateX( 180deg ) translateZ( 150px );
        transform:rotateX( 180deg ) translateZ( 150px );
}
.three-d-item:nth-child(3){
-webkit-transform:rotateY(  90deg ) translateZ( 150px );
   -moz-transform:rotateY(  90deg ) translateZ( 150px );
    -ms-transform:rotateY(  90deg ) translateZ( 150px );
     -o-transform:rotateY(  90deg ) translateZ( 150px );
        transform:rotateY(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(4){
-webkit-transform:rotateY( -90deg ) translateZ( 150px );
   -moz-transform:rotateY( -90deg ) translateZ( 150px );
    -ms-transform:rotateY( -90deg ) translateZ( 150px );
     -o-transform:rotateY( -90deg ) translateZ( 150px );
        transform:rotateY( -90deg ) translateZ( 150px );
}
.three-d-item:nth-child(5){
-webkit-transform:rotateX(  90deg ) translateZ( 150px );
   -moz-transform:rotateX(  90deg ) translateZ( 150px );
    -ms-transform:rotateX(  90deg ) translateZ( 150px );
     -o-transform:rotateX(  90deg ) translateZ( 150px );
        transform:rotateX(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(6){
-webkit-transform:rotateX( -90deg ) translateZ( 150px );
   -moz-transform:rotateX( -90deg ) translateZ( 150px );
    -ms-transform:rotateX( -90deg ) translateZ( 150px );
     -o-transform:rotateX( -90deg ) translateZ( 150px );
        transform:rotateX( -90deg ) translateZ( 150px );
}
.a:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(    0deg );
   -moz-transform:translateZ( -150px ) rotateY(    0deg );
    -ms-transform:translateZ( -150px ) rotateY(    0deg );
     -o-transform:translateZ( -150px ) rotateY(    0deg );
        transform:translateZ( -150px ) rotateY(    0deg );
}
.b:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX( -180deg );
   -moz-transform:translateZ( -150px ) rotateX( -180deg );
    -ms-transform:translateZ( -150px ) rotateX( -180deg );
     -o-transform:translateZ( -150px ) rotateX( -180deg );
        transform:translateZ( -150px ) rotateX( -180deg );
}
.c:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(  -90deg );
   -moz-transform:translateZ( -150px ) rotateY(  -90deg );
    -ms-transform:translateZ( -150px ) rotateY(  -90deg );
     -o-transform:translateZ( -150px ) rotateY(  -90deg );
        transform:translateZ( -150px ) rotateY(  -90deg );
}
.d:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateY(   90deg );
   -moz-transform:translateZ( -150px ) rotateY(   90deg );
    -ms-transform:translateZ( -150px ) rotateY(   90deg );
     -o-transform:translateZ( -150px ) rotateY(   90deg );
        transform:translateZ( -150px ) rotateY(   90deg );
}
.e:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX(  -90deg );
   -moz-transform:translateZ( -150px ) rotateX(  -90deg );
    -ms-transform:translateZ( -150px ) rotateX(  -90deg );
     -o-transform:translateZ( -150px ) rotateX(  -90deg );
        transform:translateZ( -150px ) rotateX(  -90deg );
}
.f:checked ~ .three-d-cube{
-webkit-transform:translateZ( -150px ) rotateX(   90deg );
   -moz-transform:translateZ( -150px ) rotateX(   90deg );
    -ms-transform:translateZ( -150px ) rotateX(   90deg );
     -o-transform:translateZ( -150px ) rotateX(   90deg );
        transform:translateZ( -150px ) rotateX(   90deg );}
.three-d-bullet{margin:350px 10px 0 0;float:left;}
.three-d-bullet:first-child{margin:350px 10px 0 88px;}
</style>
<section class="three-d-container">
   <input type="radio" checked class="three-d-bullet a" name="three-d">
   <input type="radio" class="three-d-bullet b" name="three-d">
   <input type="radio" class="three-d-bullet c" name="three-d">
   <input type="radio" class="three-d-bullet d" name="three-d">
   <input type="radio" class="three-d-bullet e" name="three-d">
   <input type="radio" class="three-d-bullet f" name="three-d">
   <div class="three-d-cube">
    <figure class="three-d-item">
     <img src="https://i.imgur.com/PuvmKwk.jpg" alt="">
    </figure>
    <figure class="three-d-item">
     <img src="https://i.imgur.com/f9ORcuL.jpg" alt="">
    </figure>
    <figure class="three-d-item">
     <img src="https://i.imgur.com/mPZGRly.jpg" alt="">
    </figure>
    <figure class="three-d-item">
     <img src="https://i.imgur.com/xyDlwTr.jpg" alt="">
    </figure>
    <figure class="three-d-item">
     <img src="https://i.imgur.com/3SRq2CR.jpg" alt="">
    </figure>
    <figure class="three-d-item">
     <img src="https://i.imgur.com/qegKUrF.jpg" alt="">
    </figure>
   </div>
  </section>