3D Icons - Photos in Post

3D εφε σε μια εικονα στο blogger

Πως θα κάνω τις εικόνες ή μια φωτό μας στις αναρτησεις μας να στριφογυριζει οταν περναει το ποντικι απο πανω της, να αποκτήσει το λεγομενο 3d εφε.

Δείτε το παραδειγμα

3d εφε στις φωτο μας

Προσθετωντας τον παρακάτω κώδικα στις αναρτησεις μας μπορουμε να κανουμε μια φωτο να στριφογυριζει οταν περναει το ποντικι απο πανω της, το λεγομενο 3d εφε.
 

Για να το προσθεσουμε παμε στο html μερος της αναρτησης μας και τον κανουμε επικκοληση.
Εκει που λεει yourimage.jpg  βαζουμε το λινκ της εικονας μας και εκει που λεει Caption text goes over here! βαζουμε τον τιτλο της φωτογραφιας μας η κατι αλλο, 

δειτε το στο παραδειγμα πάνω

<div class="profile-image"> <div class="flip-3d"> <figure> <img src="yourimage.jpg" /> <figcaption>Caption text goes over here!</figcaption> </figure> </div> </div>
<style> .profile-image { margin-bottom:20px; } div.flip-3d { perspective: 1200px; width: 100%; float: left; } div.flip-3d-skills { perspective: 1200px; width: 100%; float: left; } div.flip-3d figure { position: relative; transform-style: preserve-3d; transition: 1s transform; font-size: 1.6rem; } div.flip-3d figure img { width: 100%; } div.flip-3d figure figcaption { position: absolute; width: 105%; height: 50%; top: 0; transform: rotateY(.5turn) translateZ(1px); background: rgba(255,255,255,0.9); text-align: center; padding-top: 45%; opacity: 0.6; transition: 1s .5s opacity; } div.flip-3d:hover figure { transform: rotateY(.5turn); } div.flip-3d:hover figure figcaption { opacity: 1; } div.flip-3d figure:after { content: " "; display: block; height: 8vw; width: 100%; transform: rotateX(90deg); background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); } </style>

http://posftiaxnoblog.blogspot.gr/2014/09/3d-eikones-blogger.html#more