一款3D图片滚动的HTML代码

这款3D图片滚动的视觉非常亮丽，很适合用于建立网站。它可以改变旋转速度，图片大小，图片间隔以及图片红色边框也可以调整。

以下是HTML代码：

-------------------------------------------------------------------------------

<!DOCTYPE HTML>

<html>

<head>

<title>Live Demo - How to create 3D Rotating Image Gallery with CSS- Tutorialswebsite</title>

.gallery{

margin: 4% auto;

width: 210px;

height: 140px;

position: relative;

perspective: 1000px;

}

#carousel{

width: 100%;

height: 100%;

position: absolute;

transform-style: preserve-3d;

animation: rotation 20s infinite linear;

}

#carousel:hover{

animation-play-state: paused;

}

#carousel figure{

display: block;

position: absolute;

width: 90%;

height: 78%;

left: 10px;

top: 10px;

overflow: hidden;

border: solid 5px #c71730;

}

#carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);}

#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}

#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}

#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}

#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}

#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}

#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}

#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}

#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}

#carousel figure:nth-child(10) { transform: rotateY(360deg) translateZ(288px);}

#carousel img{

-webkit-filter: grayscale(0);

cursor: pointer;

transition: all .5s ease;

width:100%;

}

#carousel img:hover{

-webkit-filter: grayscale(0.8);

transform: scale(1.2,1.2);

}

@keyframes rotation{

from{

transform: rotateY(0deg);

}

to{

transform: rotateY(360deg);

}

</style>

</head>

<body>

</div>

</body>

</html>

------------------------------------------------------------------------------

打开看我的制作：https://sky814.blogspot.com/2024/10/nngn.html