S
ebagai contoh bisa anda lihat disini:DEMO
Cara pembuatan nya:
Cari kode: ]]></b:skin>
copas kode css dibawah ini dan letakkan di atas nya:
Setelah itu carilah kode: </head>
copas kode javascript di bawah ini dan letakkan di atas nya:
<script type="text/javascript" charset="utf-8"> function hasClassName(inElement, inClassName) { var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)'); return regExp.test(inElement.className); } function addClassName(inElement, inClassName) { if (!hasClassName(inElement, inClassName)) inElement.className = [inElement.className, inClassName].join(' '); } function removeClassName(inElement, inClassName) { if (hasClassName(inElement, inClassName)) { var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g'); var curClasses = inElement.className; inElement.className = curClasses.replace(regExp, ' '); } } function toggleClassName(inElement, inClassName) { if (hasClassName(inElement, inClassName)) removeClassName(inElement, inClassName); else addClassName(inElement, inClassName); } function toggleShape() { var shape = document.getElementById('shape'); if (hasClassName(shape, 'ring')) { removeClassName(shape, 'ring'); addClassName(shape, 'cube'); } else { removeClassName(shape, 'cube'); addClassName(shape, 'ring'); } // Move the ring back in Z so it's not so in-your-face. var stage = document.getElementById('stage'); if (hasClassName(shape, 'ring')) stage.style.webkitTransform = 'translateZ(-200px)'; else stage.style.webkitTransform = ''; } function toggleBackfaces() { var backfacesVisible = document.getElementById('backfaces').checked; var shape = document.getElementById('shape'); if (backfacesVisible) addClassName(shape, 'backfaces'); else removeClassName(shape, 'backfaces'); } </script>
Contoh Penerapan nya:
<div class="controls">
<h1>
Animations, Transitions and 3D Transforms</h1>
<div>
<button onclick="toggleShape()">Toggle Shape</button></div>
<div>
<input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked><label for="backfaces">Backfaces visible</label></div>
</div>
<div id="container">
<div id="stage">
<div id="shape" class="cube backfaces">
<div class="plane one">
1</div>
<div class="plane two">
2</div>
<div class="plane three">
3</div>
<div class="plane four">
4</div>
<div class="plane five">
5</div>
<div class="plane six">
6</div>
<div class="plane seven">
7</div>
<div class="plane eight">
8</div>
<div class="plane nine">
9</div>
<div class="plane ten">
10</div>
<div class="plane eleven">
11</div>
<div class="plane twelve">
12</div>
</div>
</div>
</div>
Selamat Mencoba
0 comments:
Post a Comment