3D přechod pro obrázek

Tento efektní 3D přechod je tvořen pomocí CSS3 a javascriptu a může zdobit i váš web:

Kód:

<style>
@keyframes obrazky { from {transform: rotateY(0deg);-webkit-transform: rotateY(0deg) } to { transform: rotateY(360deg); -webkit-transform: rotateY(360deg) } }
@-webkit-keyframes obrazky { from {transform: rotateY(0deg);-webkit-transform: rotateY(0deg) } to { transform: rotateY(360deg); -webkit-transform: rotateY(360deg) } }
.obrazky { width: 150px;height: 150px; animation: obrazky 2s infinite; animation-play-state: paused; -webkit-animation: obrazky 2s infinite; -webkit-animation-play-state: paused; }
</style><script type=“text/javascript“>
var num=1; setInterval(function() { num++; switch(num) { case 1: obimg.style.WebkitAnimationPlayState=“running“; obimg.style.animationPlayState=“running“; setTimeout(function() {obimg.src=“adresa prvního obrázku„;},1000); setTimeout(function() {obimg.style.WebkitAnimationPlayState=“paused“; obimg.style.animationPlayState=“paused“;},2000);break; case 2: obimg.style.WebkitAnimationPlayState=“running“; obimg.style.animationPlayState=“running“; setTimeout(function() {obimg.src=“adresa druhého obrázku„;},1000); setTimeout(function() {obimg.style.WebkitAnimationPlayState=“paused“; obimg.style.animationPlayState=“paused“;},2000);} if(num==2) num=0 },12000)
</script>
<img class=“obrazky“ id=“obimg“ src>

Ukázka:

při troše znalosti javascriptu není problém přidat více obrázků