立体六柱体swiper轮播图显示实现,代码如图所示,我这个顶部跟随容器旋转,如果顶部固定不旋转请把顶部放到容器外。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Hexahedron with Swiper</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<style>
/* Define styles for the container */
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.swiper-container {
width: 400px; /* 调整幻灯片容器的宽度 */
height: 400px;
perspective: 1000px;
}
/* Define styles for the cube */
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: rotate 10s infinite linear;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
/* Define styles for the cube faces */
.face {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
font-weight: bold;
backface-visibility: hidden;
}
/* Define colors for each face */
.face1 { background-color: red; transform: rotateY(0deg) translateZ(180px); }
.face2 { background-color: green; transform: rotateY(60deg) translateZ(180px); }
.face3 { background-color: blue; transform: rotateY(120deg) translateZ(180px); }
.face4 { background-color: yellow; transform: rotateY(180deg) translateZ(180px); }
.face5 { background-color: orange; transform: rotateY(240deg) translateZ(180px); }
.face6 { background-color: purple; transform: rotateY(300deg) translateZ(180px); }
/* Define styles for the top face */
.top {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white; /* or any other color you prefer */
border: 1px solid black;
transform: translateY(-50%) translateZ(180px) rotateX(-90deg);
/* 调整顶部面的位置,并放置在最上层 */
z-index: 1;
}
/* Define styles for the top square */
.top-square {
position: absolute;
top: 0;
left: 50%;
width: 150px; /* 调整顶部面的大小 */
height: 150px;
background-color: red; /* or any other color you prefer */
border: 1px solid black;
transform: translateX(-50%) translateY(0%) translateZ(150px) skew(45deg) scale(1);
z-index: 1; /* Ensure it's on top */
}
.containerss {
perspective: 1000px; /* 透视效果,使得元素的子元素产生三维效果 */
height: 100px; /* 使用视口高度,使得垂直方向上可以看到整个正方形 */
display: flex;
justify-content: center;
align-items: center;
}
.squaress {
width: 500px; /* 正方形的宽度 */
height: 500px; /* 正方形的高度 */
background-color: #4CAF50; /* 正方形的背景颜色 */
transform-style: preserve-3d; /* 保持子元素的三维效果 */
transform: rotateX(85deg); /* 使正方形倾斜 80 度 */
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper"> <!-- 添加一个swiper-wrapper来包裹所有幻灯片 -->
<div class="swiper-slide"> <!-- 添加一个swiper-slide -->
<div class="cube">
<div class="containerss">
<div class="squaress"></div>
</div>
<div class="face face1">1</div>
<div class="face face2">2</div>
<div class="face face3">3</div>
<div class="face face4">4</div>
<div class="face face5">5</div>
<div class="face face6">6</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
slidesPerView: 2, // 同时显示两个幻灯片
});
</script>
</body>
</html>