اسلایدر 3بعدی نمونه 1

کد html

<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="1.jpg" alt="">
			</figure>
			<figure class="three-d-item">
				<img src="2.jpg" alt="">
			</figure>
			<figure class="three-d-item">
				<img src="3.jpg" alt="">
			</figure>
			<figure class="three-d-item">
				<img src="4.jpg" alt="">
			</figure>
			<figure class="three-d-item">
				<img src="5.jpg" alt="">
			</figure>
			<figure class="three-d-item">
				<img src="6.jpg" alt="">
			</figure>
		</div>
	</section>

کد css

.three-d-container{
  margin:100px auto;
  width:300px;
  height:300px;
  border-radius: 3px;
  position:relative;
  perspective:1000px;
  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;
  transition: transform 1s;
  transform-style:preserve-3d;
  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){
  transform:rotateY(   0deg ) translateZ( 150px );
}
.three-d-item:nth-child(2){
  transform:rotateX( 180deg ) translateZ( 150px );
}
.three-d-item:nth-child(3){
  transform:rotateY(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(4){
  transform:rotateY( -90deg ) translateZ( 150px );
}
.three-d-item:nth-child(5){
  transform:rotateX(  90deg ) translateZ( 150px );
}
.three-d-item:nth-child(6){
  transform:rotateX( -90deg ) translateZ( 150px );
}
.a:checked ~ .three-d-cube{
  transform:translateZ( -150px ) rotateY(    0deg );
}
.b:checked ~ .three-d-cube{
  transform:translateZ( -150px ) rotateX( -180deg );
}
.c:checked ~ .three-d-cube{
  transform:translateZ( -150px ) rotateY(  -90deg );
}
.d:checked ~ .three-d-cube{
  transform:translateZ( -150px ) rotateY(   90deg );
}
.e:checked ~ .three-d-cube{
  transform:translateZ( -150px ) rotateX(  -90deg );
}
.f:checked ~ .three-d-cube{
  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;
}