3D ANNIMATION EFFECT ΓΙΑ ΦΩΤΟΓΡΑΦΙΕΣ

3D  ANNIMATION EFFECT ΓΙΑ ΦΩΤΟΓΡΑΦΙΕΣ
Με τον παρακάτω κώδικα μπορούμε να δώσουμε στις φωτογραφίες μας ένα 3D annimation effect. Στο τέλος αυτής της ανάρτησης έχω επιλέξει 8 φωτογραφίες από 4 νησιά, 2 για κάθε νησί, οι οποίες 2 γυρνάνε γύρω από τον εαυτό τους και είναι η μία πλάτη με την άλλη σαν εξώφυλλο και οπισθόφυλλο περιοδικού για παράδειγμα. Αν τώρα πατήσετε πάνω σε μία από αυτές θα οδηγηθήτε στο αντίστοιχο άλμπουμ για να δείτε και τις υπόλοιπες φωτογραφίες του νησιού. Οι διαστάσεις των φωτογραφιών αλλάζουν όπου γράφει height: 300px;  width: 480px;

Αλλάξτε τα link των φωτογραφιών με τα μώβ γράμματα και τους συνδέσμους που οδηγούν στα άλμπουμ με τα πράσινα γράμματα. Ο χρόνος περιστροφής αλλάζει εκεί που γράφει 12s infinite linear;

<style>

#logos {

  position:relative;  top: 0px;  left: 0px;

  -webkit-perspective: 960px;   perspective: 960px;}

#cube {

  display: block;  position: relative;  margin: 30px auto;

  height: 300px;  width: 480px;

  -webkit-transform-style: preserve-3d;

  -webkit-transform: rotateX(0) rotateY(360deg) rotateZ(0);

  transform-style: preserve-3d;

  transform: rotateX(0) rotateY(360deg) rotateZ(0);}

#front {

  position: absolute;  height: 300px;  width: 480px;

  -webkit-backface-visibility: visible;

  -webkit-transform:  rotateY(360deg) translateX(0px) translateY(0px);

  backface-visibility: visible;

  transform:  rotateY(360deg) translateX(0px) translateY(0px);}

#back {

  position: absolute;  height: 300px;  width: 480px;

  -webkit-backface-visibility: visible;

  -webkit-transform:  rotateY(360deg) translateX(0px) translateY(0px);

  backface-visibility: visible;

  transform:  rotateY(360deg) translateX(0px) translateY(0px);}

#cube {

-webkit-animation: myphotos 12s infinite linear;

animation: my photos 12s infinite linear;}

@-webkit-keyframes myphotos {0% {-webkit-transform: rotateY(0);}

100% {-webkit-transform: rotateY(180deg);}}

@keyframes myphotos {0% {transform: rotateY(0);}

100% {transform: rotateY(180deg);}}

</style>

<div id="logos">

<a id="cube" href="http://imgur.com/a/dO3lt/layout/grid">

<img src="http://i.imgur.com/oSC4D7R.jpg"  id="front" title="SKIATHOS-1">

<img src="http://i.imgur.com/W8LjNt5.jpg"  id="front" title="SKIATHOS-2"></a>

<a id="cube" href="http://imgur.com/a/RCZnw/layout/grid">

<img src="http://i.imgur.com/Rh3e0w6.jpg"  id="front" title="SKOPELOS-1">

<img src="http://i.imgur.com/DgCJJQe.jpg" id="back" title="SKOPELOS-2"></a>

<a id="cube" href="http://imgur.com/a/oGuuy/layout/grid">

<img src="http://i.imgur.com/UMQ2IrD.jpg"  id="front" title="ALONHSOS-1">

<img src="http://i.imgur.com/9GqSG9a.jpg"  id="front" title="ALONHSOS-2"></a>

<a id="cube" href="http://imgur.com/a/vwgXh/layout/grid">

<img src="http://i.imgur.com/CaUHw47.jpg"  id="front" title="SKYROS-1">

<img src="http://i.imgur.com/ZD7MAOw.jpg" id="back" title="SKYROS-2"></a></div>