Codice CSS HTML JavaScript per smartwatch 3D

19 rahimelchikour

Apri nell'Editor Pubblica il Tuo Codice

Codice CSS HTML JavaScript per smartwatch 3D

Consigliato

13 November 2024

Effetto cornice fotografica CSS 3D per immagini

14 March 2025

Interazione dei prezzi (HTML, CSS e JS)

12 August 2025

Modulo di accesso HTML con sfondo Matrix

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>

Consigliato

Effetto cornice fotografica CSS 3D per immagini

Interazione dei prezzi (HTML, CSS e JS)

Modulo di accesso HTML con sfondo Matrix

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS