<!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!
