animation java des video

27 programme

Ouvrir dans l'éditeur Publiez votre code

Recommandé

25 February 2026

Générateur de codes QR HTML, JavaScript

18 May 2026

Formulaire d'envoi de pièces TikTok HTML

19 May 2026

Charger du code HTML et des scripts externes via l'API Fetch

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: black;
        }
        .ton{
            position: relative;
            width: 200px;
            height: 150px;
            transform-style: preserve-3d;
            animation: tourner 20s linear infinite;
        }
        .ton span{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: rotateY(calc(var(--i)*45deg)) translateZ(300px);
        }
        .ton span video{
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
        @keyframes tourner{
            0%{
                transform: perspective(1000px) rotateY(0deg);
            }
            100%{
                transform: perspective(1000px) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="ton">
<span style="--i:0"><video src="video.MP4" controls></video></span>
<span style="--i:1"><video src="video.MP4" controls></video></span>
<span style="--i:2"><video src="video.MP4" controls></video></span>
<span style="--i:3"><video src="video.MP4" controls></video></span>
    </div>
</body>
</html>

CSS