<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rotierendes Bildkarussell</title> <Stil> Körper { Anzeige: Flex; rechtfertigen-Inhalt: Mitte; align-items: center; Höhe: 100 Vh; Rand: 0; Hintergrundfarbe: #0d0d0d; Überlauf: versteckt; Übergang: Hintergrundbild 0,5 s Leichtigkeit; Hintergrundgröße: Cover; Hintergrundposition: Mitte; } /* Karussellbehälter */ .karussell { Position: relativ; Breite: 130px; Höhe: 130px; Transformationsstil: Preserve-3d; Perspektive: 1000px; Übergang: 1s transformieren; } /* Bildstile */ .carousel img { Position: absolut; Höhe: 100 %; Breite: 100 %; /* Breite: 150px; Höhe: 150px; */ Randradius: 10px; Box-Shadow: 0 0 10px rgba(255, 110, 199, 0,3); Transformationsursprung: Mitte; Übergang: Transformation 0,5 s, Filter 0,5 s; Deckkraft: 0,8; } /* Jedes Bild um die Y-Achse positionieren */ .carousel img:nth-child(1) { transform: rotationY(0deg) translatorZ(150px); } .carousel img:nth-child(2) { transform: rotationY(72deg) translatorZ(150px); } .carousel img:nth-child(3) { transform: rotationY(144deg) translatorZ(150px); } .carousel img:nth-child(4) { transform: rotationY(216deg) translatorZ(150px); } .carousel img:nth-child(5) { transform: rotationY(288deg) translatorZ(150px); } /* Steuersymbole */ .controls { Position: absolut; unten: 20px; links: 20px; Anzeige: Flex; Lücke: 10px; } .controls-Schaltfläche { Breite: 40px; Höhe: 40px; Schriftgröße: 18px; Grenze: keine; Hintergrundfarbe: #181616; Farbe: #fff; Cursor: Zeiger; Randradius: 50 %; Übergang: Hintergrundfarbe 0,3 s; } .controls button:hover { Hintergrundfarbe: #555; } </style> </head> <Körper> <div>
Das obige ist der detaillierte Inhalt vonBildkarussell-Rotationsillusion mit HTML-CSS und Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!