切换至摄影模板
博文
一款3D图片滚动的HTML代码
这款3D图片滚动的视觉非常亮丽，很适合用于建立网站。它可以改变旋转速度，图片大小，图片间隔以及图片红色边框也可以调整。
以下是HTML代码：
打开看我的制作：https://sky814.blogspot.com/2024/10/nngn.html
-------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Demo - How to create 3D Rotating Image Gallery with CSS- Tutorialswebsite</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Add custom CSS here -->
<style type="text/css">
.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 class="container">
<div class="row">
<div class="col-lg-12">
<div class="div-center gallery">
<div id="carousel">
<figure><img src="gallery/banner/1.jpg" alt=""></figure>
<figure><img src="gallery/banner/2.jpg" alt=""></figure>
<figure><img src="gallery/banner/3.jpg" alt=""></figure>
<figure><img src="gallery/banner/4.jpg" alt=""></figure>
<figure><img src="gallery/banner/5.jpg" alt=""></figure>
<figure><img src="gallery/banner/6.jpg" alt=""></figure>
<figure><img src="gallery/banner/7.jpg" alt=""></figure>
<figure><img src="gallery/banner/8.jpg" alt=""></figure>
<figure><img src="gallery/banner/9.jpg" alt=""></figure>
<figure><img src="gallery/banner/10.jpg" alt=""></figure>
<!-- JavaScript -->
</body>
</html>
------------------------------------------------------------------------------
免责声明：本文中使用的图片均由博主自行发布，与本网无关，如有侵权，请联系博主进行删除。
