Poster Circle

Cara Pembuatan nya sebagai berikut:

1. Login
2. Setelah masuk pada halaman dasbor pilih rancangan
3. Klik edit Html
4. Centang expad widget dan cari kode ]]></b:skin>agar pencarian kode lebih cepat tekan Ctrl+F atau F3
5. Salin Kode Css di bawah ini dan letakkan di atas kode yang anda cari tadi

<style type="text/css"> body { font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px; } #stage { margin: 150px auto; width: 600px; height: 400px; /* Setting the perspective of the contents of the stage but not the stage itself */ -webkit-perspective: 800; } #rotate { margin: 0 auto; width: 600px; height: 400px; /* Ensure that we're in 3D space */ -webkit-transform-style: preserve-3d; /* Make the whole set of rows use the x-axis spin animation for a duration of 7 seconds, running infinitely and linearly */ -webkit-animation-name: x-spin; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .ring { margin: 0 auto; height: 110px; width: 600px; -webkit-transform-style: preserve-3d; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .ring > :nth-child(odd) { background-color: #995C7F; } .ring > :nth-child(even) { background-color: #835A99; } .poster { position: absolute; left: 250px; width: 100px; height: 100px; opacity: 0.7; color: rgba(0,0,0,0.9); -webkit-border-radius: 10px; } .poster > p { font-family: 'Georgia', serif; font-size: 36px; font-weight: bold; text-align: center; margin-top: 28px; } /* Set up each row to have a different animation duration and alternating y-axis rotation directions. */ #ring-1 { -webkit-animation-name: y-spin; -webkit-animation-duration: 5s; } #ring-2 { -webkit-animation-name: back-y-spin; -webkit-animation-duration: 4s; } #ring-3 { -webkit-animation-name: y-spin; -webkit-animation-duration: 3s; } /* Here we define each of the three individual animations that we will be using to have our 3D rotation effect. The first animation will perform a full rotation on the x-axis, we'll use that on the whole set of objects. The second and third animations will perform a full rotation on the y-axis in opposite directions, alternating directions between rows. Note that you currently have to specify an intermediate step for rotations even when you are using individual transformation constructs. */ @-webkit-keyframes x-spin { 0% { -webkit-transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); } } @-webkit-keyframes y-spin { 0% { -webkit-transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); } } @-webkit-keyframes back-y-spin { 0% { -webkit-transform: rotateY(360deg); } 50% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); } } </style><br /> <br /> <script type="text/javascript"> const POSTERS_PER_ROW = 12; const RING_RADIUS = 200; function setup_posters (row) { var posterAngle = 360 / POSTERS_PER_ROW; for (var i = 0; i < POSTERS_PER_ROW; i ++) { var poster = document.createElement('div'); poster.className = 'poster'; // compute and assign the transform for this poster var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)'; poster.style.webkitTransform = transform; // setup the number to show inside the poster var content = poster.appendChild(document.createElement('p')); content.textContent = i; // add the poster to the row row.appendChild(poster); } } function init () { setup_posters(document.getElementById('ring-1')); setup_posters(document.getElementById('ring-2')); setup_posters(document.getElementById('ring-3')); } // call init once the document is fully loaded window.addEventListener('load', init, false); </script>

Markah Html

<div id="stage">       <div id="rotate">         <div id="ring-1" class="ring"></div>         <div id="ring-2" class="ring"></div>         <div id="ring-3" class="ring"></div>       </div>     </div>

Selamat Mencoba

credit: webkit