Untitled

DESIGNING
unknown
plain_text
a month ago
5.6 kB
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>