WEB
DESIGNERGhoskali
html
a month ago
5.6 kB
2
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Cube with Multiple Images</title> <style> body { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; perspective: 1000px; /* Create perspective effect */ } .cube-row { display: flex; gap: 20px; /* Space between cubes */ margin-bottom: 40px; /* Space between rows */ } .cube { position: relative; width: 200px; /* Adjust size based on image */ height: 200px; /* Adjust size based on image */ transform-style: preserve-3d; /* Enable 3D transformations */ transform: rotateX(20deg) rotateY(-45deg); /* Rotate to show cube rotated 45 degrees to the left */ transition: transform 0.5s ease; } .cube:hover { transform: rotateX(20deg) rotateY(-45deg) rotateY(10deg); /* Slight rotation on hover */ } .face { position: absolute; width: 200px; /* Match the cube width */ height: 200px; /* Match the cube height */ display: flex; align-items: center; justify-content: center; overflow: hidden; /* Hide overflow for a clean look */ background: #fff; /* Ensure background visibility */ border-radius: 10px; /* Optional: Rounded corners for a softer look */ } .face img { width: 100px; /* Adjust image size */ height: 100px; transition: transform 0.5s ease, box-shadow 0.5s ease, border 0.5s ease; border: 5px solid transparent; /* Default border */ border-radius: 10px; /* Rounded corners to match the face */ } .face img:hover { transform: translateZ(10px); /* Lift the image up */ box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5); border: 5px solid orange; /* Solid orange border on hover */ border-image: linear-gradient(45deg, #ffcc00, #ff9900); /* Gradient border effect */ border-image-slice: 1; /* Ensure the gradient covers the border */ } .face .text { color: #333; font-size: 12px; /* Adjust font size */ opacity: 0; transition: opacity 0.5s ease; background: rgba(255, 255, 255, 0.8); padding: 2px 5px; border-radius: 3px; text-align: right; position: absolute; bottom: 10px; /* Adjust distance from bottom */ right: 10px; /* Adjust distance from right */ } .face:hover .text { opacity: 1; } .front { transform: rotateY(0deg) translateZ(100px); /* Adjust based on cube size */ } </style> </head> <body> <div class="cube-row"> <div class="cube"> <div class="face front"> <img src="try.jpg" alt="Image 1"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="try.jpg" alt="Image 2"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="try.jpg" alt="Image 3"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="9.png" alt="Image 4"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="8.png" alt="Image 5"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="7.png" alt="Image 6"> <div class="text">Services</div> </div> </div> </div> <div class="cube-row"> <div class="cube"> <div class="face front"> <img src="6.png" alt="Image 7"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="5.png" alt="Image 8"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="4.png" alt="Image 9"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="3.png" alt="Image 10"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="2.jpeg" alt="Image 11"> <div class="text">Services</div> </div> </div> <div class="cube"> <div class="face front"> <img src="1.jpeg" alt="Image 12"> <div class="text">Services</div> </div> </div> </div> </body> </html>
Leave a Comment