Ejemplo de código CSS 3D para reloj inteligente

373 mohamadrezaafsharnia.barbad

Abrir en el editor Publica tu código

Ejemplo de código CSS 3D para reloj inteligente

Recomendado

14 December 2024

Un código de ab_andybv

16 May 2025

Un código de Maxi-Digital

17 May 2025

Formulario de inicio de sesión moderno + barra lateral deslizante

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Smart Watch</title>
    <style>
        :root {
            --watch-primary: #0d0d0d;
            --watch-accent: #606c78;
            --watch-text: #dddf8f;
            --watch-glow: #d7d886c7;
            --watch-shadow: #00000071;
            --watch-metal: linear-gradient(135deg, #3a3f45 0%, #1c1f23 50%, #3a3f45 100%);
        }

body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
            perspective: 1000px;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }

.scene {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform-style: preserve-3d;
            transition: transform 1s;
        }

.watch-container {
            position: relative;
            transform-style: preserve-3d;
            transition: all 0.5s ease;
            transform: rotateY(15deg) rotateX(10deg);
        }

.watch-container:hover {
            transform: rotateY(25deg) rotateX(15deg);
        }

.watch {
            position: relative;
            transform: scale(0.7);
            transform-style: preserve-3d;
            transition: transform 0.3s ease;
        }

.watch:hover {
            transform: scale(0.72);
        }

/* 3D Bezel effect */
        .watch::before {
            content: "";
            position: absolute;
            width: 22rem;
            height: 420px;
            border-radius: 100px;
            background: var(--watch-metal);
            box-shadow: 0 10px 50px rgba(0,0,0,0.5),
                        inset 0 0 20px rgba(255,255,255,0.1);
            transform: translateZ(-10px);
            z-index: -1;
        }

/* Side metal band */
        .watch::after {
            content: "";
            position: absolute;
            width: 12rem;
            height: 200px;
            background: var(--watch-metal);
            left: 50%;
            transform: translate(-50%, 0%) translateZ(-15px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            border-radius: 10px;
        }

.frame {
            background: var(--watch-primary);
            border-radius: 92px;
            box-shadow: inset 0 0 24px 1px var(--watch-primary), 
                        inset 0 0 0 12px var(--watch-accent),
                        0 20px 50px var(--watch-shadow);
            height: 380px;
            margin: 0 20px;
            padding: 28px 26px;
            position: relative;
            width: 20rem;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transform-style: preserve-3d;
            transition: all 0.3s ease;
        }

.frame:hover {
            box-shadow: inset 0 0 24px 1px var(--watch-primary), 
                        inset 0 0 0 12px var(--watch-accent),
                        0 20px 60px rgba(0, 0, 0, 0.9);
        }

/* 3D screen effect */
        .frame::before {
            content: "";
            position: absolute;
            width: calc(100% - 24px);
            height: calc(100% - 24px);
            border-radius: 80px;
            background: rgba(0,0,0,0.3);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2),
                        inset 0 0 30px 5px rgba(255, 255, 255, 0.1);
            top: 12px;
            left: 12px;
            transform: translateZ(1px);
        }

.text {
            color: var(--watch-text);
            font-size: 10rem;
            font-family: 'Segment7Standard', monospace;
            font-weight: bolder;
            line-height: 0.8;
            text-shadow: 0 0 40px var(--watch-glow);
            display: flex;
            gap: 10px;
            position: relative;
            transform: translateZ(5px);
        }

.sideBtn {
            background: var(--watch-metal);
            border-left: 1px solid #000;
            border-radius: 8px 6px 6px 8px / 20px 6px 6px 20px;
            box-shadow: inset 8px 0 8px 0 #1c1f23, 
                        inset -2px 0 6px #272c31,
                        -4px 0 8px rgba(13, 13, 13, 0.25);
            height: 72px;
            position: absolute;
            right: -12px;
            top: 108px;
            width: 18px;
            z-index: 9;
            cursor: pointer;
            transition: transform 0.2s ease;
            transform: translateZ(5px);
        }

.sideBtn:active {
            transform: translateX(2px) translateZ(5px);
        }

.powerBtn {
            background: var(--watch-metal);
            border-radius: 2px 4px 4px 2px / 2px 8px 8px 2px;
            box-shadow: inset 0 0 2px 1px #101315;
            height: 72px;
            position: absolute;
            right: 6px;
            top: 212px;
            width: 4px;
            cursor: pointer;
            transition: transform 0.2s ease;
            transform: translateZ(5px);
        }

.powerBtn:active {
            transform: translateX(2px) translateZ(5px);
        }

/* 3D dots */
        .dots {
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translate(-50%, 0%) translateZ(-5px);
            padding: 3px;
            z-index: 20;
            display: flex;
            gap: 8px;
        }

.dot {
            width: 17px;
            aspect-ratio: 1;
            background: var(--watch-metal);
            border-radius: 100px;
            display: block;
            box-shadow: inset 2px 0 5px #ffffff48,
                        0 2px 5px rgba(0,0,0,0.5);
            transition: all 0.3s ease;
            transform-style: preserve-3d;
        }

.dot:hover {
            transform: scale(1.2) translateZ(5px);
            background: #333;
        }

/* Watch face elements */
        .date-display {
            position: absolute;
            top: 60px;
            right: 60px;
            color: var(--watch-text);
            font-family: 'Arial', sans-serif;
            font-size: 1.2rem;
            text-shadow: 0 0 10px var(--watch-glow);
            opacity: 0.8;
            transform: translateZ(5px);
        }

.battery-indicator {
            position: absolute;
            bottom: 40px;
            right: 60px;
            width: 40px;
            height: 16px;
            border: 1px solid var(--watch-text);
            border-radius: 3px;
            padding: 2px;
            transform: translateZ(5px);
        }

.battery-level {
            height: 100%;
            width: 80%;
            background-color: var(--watch-text);
            border-radius: 2px;
            box-shadow: 0 0 5px var(--watch-glow);
            transition: width 1s linear;
        }

/* Digital font for the watch */
        @font-face {
            font-family: 'Segment7Standard';
            src: url('https://cdn.jsdelivr.net/npm/segment7-font@1.0.0/Segment7Standard.woff2') format('woff2');
            font-weight: normal;
            font-style: italic;
        }

/* Ambient light effect */
        .light {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            transition: all 0.5s ease;
        }

/* Control panel */
        .controls {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 20px;
            z-index: 100;
        }

.control-btn {
            padding: 10px 20px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            color: white;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.control-btn:hover {
            background: rgba(255,255,255,0.2);
        }

/* Watch face reflection */
        .reflection {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 50%);
            border-radius: 80px;
            pointer-events: none;
            mix-blend-mode: overlay;
        }
    </style>
</head>
<body>
    <div class="scene">
        <div class="light" id="ambientLight"></div>
        <div class="watch-container">
            <div class="watch">
                <div class="frame">
                    <div class="reflection"></div>
                    <div class="text">
                        <div class="hours">00</div>
                        <div class="minutes">00</div>
                    </div>
                    <div class="date-display">MON 01 JAN</div>
                    <div class="battery-indicator">
                        <div class="battery-level"></div>
                    </div>
                </div>
                <div class="sideBtn"></div>
                <div class="powerBtn"></div>
                <div class="dots">
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>
        </div>
        <div class="controls">
            <button class="control-btn" id="rotateLeft">↻ Rotate Left</button>
            <button class="control-btn" id="rotateRight">↺ Rotate Right</button>
            <button class="control-btn" id="toggleLight">☀ Toggle Light</button>
        </div>
    </div>

CSS