3D Picture Carousel
Bilder Karussell mit Manuelen vor und zurück Buttons
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D Picture Carousel JavaScript CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{margin:0; padding: 0;}
section, footer, nav {
display: block;
}
body {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #333;
padding: 0px;
overflow: hidden;
background-image: -webkit-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-image: linear-gradient(180deg,rgba(0,0,0,1.00) 0%,rgba(67,0,125,1.00) 49.22%,rgba(26,0,255,1.00) 100%);
background-attachment: fixed;
}
/*Ändere hier die Höhe und Breite des Bildes das muss auch in Javascript angepasst werden panelSize*/
.container {
position: relative;
margin: 0 auto;
width: 13vw;
height: 13vw;
perspective: 1000px;
perspective-origin: 100px -100px;
}
#carousel {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;