Προσθετωντας αυτο τον κωδικo στις αναρτησεις μας μπορουμε να κανουμε μια φωτο να στριφογυριζει οταν πeρναει το ποντικι απο πανω της, το λεγομενο 3d εφε
Για να το προσθεσουμε παμε στο html μερος της αναρτησης μας και το κανουμε επικκοληση.
Εκει που λεει yourimage.jpg βαζουμε το λινκ της εικονας μας και εκει που λεει Caption text goes over here! βαζουμε τον τιτλο της φωτογραφιας μας η κατι αλλο, δειτε ενα παραδειγμα.
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>
