Animated Cube Slider

Memasang kode Animated Cube Slider
Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode  
blank template,  yang tersedia pada sumber berikut  :  
Get Blank Template  edit background warna sesuai keinginan Kemudian klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

*{    margin:0px;
 padding:0px;}
body
{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhel8gRjfvpIYMEcACObTfwn1Oj9Rt5vO3HYRNeMmd0_RHsAaLkw9JPxBn9BunEYhqy-Og_VQrsS50InyBFXvmScVIellEC3DtJts8GrCSLN-QwiRCbmhavqDqWE9NQmKYwniah35owb14/s1600-r/Triplek-mys2010s.jpg);
 background-size:cover;
 background-repeat:no-repeat;
 font-family: "Open Sans", sans-serif;
 font-size: 11px;
 }

/* HEADER*/
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: green;
  border-bottom: 3px solid #dad;
}

/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 50px;
margin: auto;
font-agency fb: Arial, sans-serif;
font-size: 17px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #fff;
background: #333;
border-top: 2px solid #f0f;
z-index: 9999;
}

.title {
  text-align: center;
  margin: 40px;
}

 .title h1, .title p {
   margin: 0;
 }

.slider {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 width: 200px;
 height: 200px;
  margin: auto;
 -webkit-perspective: 600px;
         perspective: 600px;
}

 .slider * {
  -webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
          transition: all 1s cubic-bezier(0.5, -0.75, 0.2, 1.5);
 }

 .container {
  width: inherit;
  height: inherit;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg) rotateX(0deg);
          transform: rotateY(0deg) rotateX(0deg);
 }

  .slide, .slide:after, .slide:before {
   display: block;
   width: inherit;
   height: inherit;
   background: url('#');
   position: absolute;
   -webkit-transform-style: preserve-3d;
           transform-style: preserve-3d;
   background-size: cover;
   background-position: center;
  }

  .slide.x {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }

   .slide.x:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTv3FJcLqB2X-M0cv5HijKiVioWfAq0IWFZwMtJGiN3TAmOOWj2ZT_tsJA4TInC64J6XVbR74-KoM8mHyuD8gC7dSaXi-vq_iB83rhTxFlWgWh_cyws955h91S3YpGBvQKFjQQA6JTBmw/s1600-r/yayang7.jpg');
    -webkit-transform: translateZ(100px) rotateZ(-90deg);
            transform: translateZ(100px) rotateZ(-90deg);
   }

   .slide.x:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMZbmlA-aG5FFLSA4h4WYBApHv_9ysYAwaz360n3HpFKyeTxEYjAjizvJsRZzPYkrXgVnz-u0Yw_-vxtGaFGbV9gOEEGynwe-3LJ1ZVSwldYEYRJ21Y6gTPR3Y5Kbrb118PvEg65c66vU/s1600-r/yayang6.jpg');
    -webkit-transform: translateZ(-100px) rotateZ(-90deg);
            transform: translateZ(-100px) rotateZ(-90deg);
   }

  .slide.y {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }

   .slide.y:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP5_WJ_KzK5wjpa5lHo0QhJqqqOlP-N2_bRJUWTgeKYb5_W-kRbo6bJOiYF3fn0KbU8661ltYv_8Xpq9DrfZ0MCW-ZW3jdMdNgRqapde3GIciVi7HiW-4SxKpJtwxsz50uyAipBcZMCSY/s1600-r/yayang5.jpg');
    -webkit-transform: translateZ(100px) scale(-1);
            transform: translateZ(100px) scale(-1);
   }

   .slide.y:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z-eoplWNyRVj7NGC2E1UTeSCg5c7n-qFiGmtttq4PRv7aC-XvJKTo0uhiiX0H1RNPWw1lPO-Zml-Dxa3I8uif4p6BXqJQEqc4th_RS49RvbxCgREcm-OMoX2hKQ5C81I-QSmkKGAN0c/s1600-r/yayang3.jpg');
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
   }

  .slide.z {
    -webkit-transform: rotateX(0);
            transform: rotateX(0);
  }

   .slide.z:after {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0Z-eoplWNyRVj7NGC2E1UTeSCg5c7n-qFiGmtttq4PRv7aC-XvJKTo0uhiiX0H1RNPWw1lPO-Zml-Dxa3I8uif4p6BXqJQEqc4th_RS49RvbxCgREcm-OMoX2hKQ5C81I-QSmkKGAN0c/s1600-r/yayang3.jpg');
    -webkit-transform: translateZ(100px);
            transform: translateZ(100px);
   }

   .slide.z:before {
    content: '';
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD5a4VGOWPaV4lg0GDkh27ak73E5J0PyjqAw9ArbJoe8iN1UKLHi3HElm08ud2eZQoYNSUDhZyTrkVOBSJqxs5_aY6cN3sqMsl1ad_kowX32AdjMrfw_2pgx3ujqmPvQCRQZTcvLKiPss/s1600-r/yayang1.jpg');
    -webkit-transform: translateZ(-100px);
            transform: translateZ(-100px);
   }


  .container {
   -webkit-animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
   animation: rotate 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
  }

  @-webkit-keyframes rotate {
   0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
   15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
   25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
   40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
   55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
   70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
   90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
  }

  @keyframes rotate {
   0%, 10% {-webkit-transform: rotateY(0deg) rotateX(0deg);transform: rotateY(0deg) rotateX(0deg);}
   15%, 20% {-webkit-transform: rotateY(180deg) rotateX(0deg);transform: rotateY(180deg) rotateX(0deg);}
   25%, 35% {-webkit-transform: rotateY(180deg) rotateX(270deg);transform: rotateY(180deg) rotateX(270deg);}
   40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);transform: rotateY(180deg) rotateX(90deg);}
   55%, 65% {-webkit-transform: rotateY(-90deg) rotateX(90deg);transform: rotateY(-90deg) rotateX(90deg);}
   70%, 80% {-webkit-transform: rotateY(90deg) rotateX(90deg);transform: rotateY(90deg) rotateX(90deg);}
   90%, 95% {-webkit-transform: rotateY(0deg) rotateX(90deg);transform: rotateY(0deg) rotateX(90deg);}
  }


.shadow {
 display: block;
 width: 200px;
 height: 200px;
 background: rgba(0,0,0,0.75);
 position: absolute;
 top: 60%;
 -webkit-transform: rotateX(90deg);
         transform: rotateX(90deg);
 z-index: -1;
 -webkit-filter: blur(20px);
 filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><fegaussianblur stdDeviation="20" /></filter></svg>#filter');
 -webkit-filter: blur(20px);
         filter: blur(20px);
 left: 0;
 right: 0;
 margin: auto;
 -webkit-animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
 animation: rotateShadow 15s infinite cubic-bezier(1, -0.75, 0.5, 1.2);
}

 @-webkit-keyframes rotateShadow {
  0%, 10% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
  15%, 20% {-webkit-transform: rotateY(180deg) rotateX(90deg);;}
  20.1%, 20.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(5px);}
  25%, 35% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  35.1%, 35.9% {-webkit-transform: rotateY(180deg) rotateX(90deg) translatez(-5px);}
  40%, 50% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  55%, 65% {-webkit-transform: rotateY(0deg) rotateX(90deg);}
  70%, 80% {-webkit-transform: rotateY(180deg) rotateX(90deg);}
  90%, 99% {-webkit-transform: rotateY(90deg) rotateX(90deg);}
  99.1%, 99.9% {-webkit-transform: rotateY(90deg) rotateX(90deg) translatez(-5px);}
 }

 /*@keyframes rotateShadow {
  0%, 10% {transform: rotateY(0deg) rotateX(90deg);}
  15%, 20% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
  20.1%, 20.9% {transform: rotateY(180deg) rotateX(90deg) translatez(10px); opacity: 0.95; filter: alpha(opacity=95);}
  25%, 35% {transform: rotateY(180deg) rotateX(90deg); opacity: 1; filter: alpha(opacity=100);}
  35.1%, 35.9% {transform: rotateY(180deg) rotateX(90deg) translatez(-10px); opacity: 0.95; filter: alpha(opacity=95);}
  40%, 50% {transform: rotateY(180deg) rotateX(90deg);}
  55%, 65% {transform: rotateY(0deg) rotateX(90deg);}
  70%, 80% {transform: rotateY(180deg) rotateX(90deg);}
  90%, 99% {transform: rotateY(0deg) rotateX(90deg);}
  99.1%, 99.9% {transform: rotateY(180deg) rotateX(90deg) translatez(5px); opacity: 0.95; filter: alpha(opacity=95);}
 }*/

/*
Credit */

 .credit {
  position: fixed;
  bottom: 22px;
  left: 0;
  right: 0;
  margin: auto;
  width: 200px;
  text-align: center;
 }
 .credit a {
  font-weight: 900;
  color: blue;
  text-decoration: none;
  -webkit-transition: all .15s linear;
          transition: all .15s linear;
  background: url(#)no-repeat right;
  background-size: 12px;
  padding-right: 20px !important;
  -filter: invert(1);
  -webkit-filter: invert(1);
  -moz--filter: invert(1);
 -o--filter: invert(1);
 }
 .credit a:hover {
  color: tomato;
 }

<div class="title">
<h1>
<a href="http://codepen.io/Myscript2010/full/qZqqxy/" target="_blank" title="Slider Mys2010 on Codepen">
Animated Cube Slider</h1>
</a>
<p>
CSS Only</p>
</div>
<div class="slider">
<div class="container">
<div class="slide x">
</div>
<div class="slide y">
</div>
<div class="slide z">
</div>
</div>
<div class="shadow">
</div>
</div>
<p class="credit">

<header>
<div class="Top Title Header">
<div align="center">
<font size="3" color="aqua"face="agency fb">Sources by. <a href="http://codepen.io/hrtzt/pen/JdYaEZ" target="_blank" title="Slider on Codepen"><font size="3" color="white"face="agency fb">Alberto Hartzet </a></font> on Codepen </a>
</div>
</header>

<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<p>Edited by <span><a href="http://sample-mys2010.blogspot.co.id/p/statis-home.html"target="_blank" title="Hover Mys2010">Myscript2010s</a></span></p>

Penjelsan :
Ganti Link Gambar dan Link Title sesuai keinginan

Edited by. Mys2010 on Codepen
Sources by. Alberto Hartzet on Codepen

DEMOSHOW