Code CSS, HTML et JavaScript pour montre connectée 3D

23 rahimelchikour

Ouvrir dans l'éditeur Publiez votre code

Code CSS, HTML et JavaScript pour montre connectée 3D

Recommandé

21 July 2025

Écran TV HTML avec intégration et effets YouTube

9 July 2025

Liste des pistes et informations sur l'album Cowboy Carter

29 June 2025

Power Gym : Modèle HTML pour le fitness, l'entraînement et les cours

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>

Recommandé

Écran TV HTML avec intégration et effets YouTube

Liste des pistes et informations sur l'album Cowboy Carter

Power Gym : Modèle HTML pour le fitness, l'entraînement et les cours

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS