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

962 rahimelchikour

Ouvrir dans l'éditeur Video Publiez votre code

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

Recommandé

9 July 2025

Carte de prix avec effet d'inclinaison 3D et d'anneau énergétique

16 January 2026

Modèle HTML de joueur de jeu Ruffle Flash

14 October 2024

Un modèle de page Web pour « Anes Development » avec un message de bienvenue et une navigation.

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é

Carte de prix avec effet d'inclinaison 3D et d'anneau énergétique

Modèle HTML de joueur de jeu Ruffle Flash

Un modèle de page Web pour « Anes Development » avec un message de bienvenue et une navigation.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS