Codice CSS 3D per smartwatch: visualizzazione interattiva dell'ora

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

30 March 2025

<!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>

Codice CSS 3D per smartwatch: visualizzazione interattiva dell'ora

Consigliato

Un codice di ytr3d3

Un codice di Mete

Film di carte CSS pure 3D

HTML

CSS

JS

Consigliato

Un codice di ytr3d3

Un codice di Mete

Film di carte CSS pure 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS