html - 如何在 3D 轮播中隐藏远图像
问题描述
我创建 3D 轮播并想将远图像隐藏在其他图像后面。
我尝试使用 z-index,但它都显示了图像后面或图像上的轮播。
HTML
<section id="slideshow">
<div class="entire-content">
<div class="content-carrousel">
<figure class="shadow"><img src="https://i.imgur.com/gxi7mUS.jpg"/></figure>
<figure class="shadow"><img src="https://i.imgur.com/jvezYfs.jpg"/></figure>
<figure class="shadow"><img src="https://i.imgur.com/DruSF8L.jpg"/></figure>
<figure class="shadow"><img src="https://i.imgur.com/H3nOS9Q.jpg"/></figure>
<figure class="shadow"><img src="https://i.imgur.com/njOuWQP.jpg"/></figure>
<figure class="shadow"><img src="https://i.imgur.com/UZ4aFKC.jpg"/></figure>
</div>
</div>
</section>
CSS
* {
margin: 0;
padding: 0;
}
html, body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
background-image: url('https://i.imgur.com/UgflRNF.jpg');
}
#slideshow {
margin: 0 auto;
padding-top: 10%;
height: 600px;
width: 100%;
}
.slideshow-title {
font-size: 62px;
color: #fff;
margin: 0 auto;
text-align: center;
margin-top: 25%;
letter-spacing: 3px;
font-weight: 300;
}
.sub-heading {
padding-top: 50px;
font-size: 18px;
}
.sub-heading-two {
font-size: 15px;
}
.sub-heading-three {
font-size: 13px;
}
.sub-heading-four {
font-size: 11px;
}
.sub-heading-five {
font-size: 9px;
}
.sub-heading-six {
font-size: 7px;
}
.sub-heading-seven {
font-size: 5px;
}
.sub-heading-eight {
font-size: 3px;
}
.sub-heading-nine {
font-size: 1px;
}
.entire-content {
margin: auto;
width: 300px;
perspective: 1200px;
position: relative;
padding-top: 80px;
z-index: 1;
}
.content-carrousel {
width: 100%;
position: absolute;
float: right;
animation: rotar 15s infinite linear;
transform-style: preserve-3d;
}
.content-carrousel:hover {
animation-play-state: paused;
cursor: pointer;
}
.content-carrousel figure {
width: 100%;
height: 220px;
border: 1px solid #3b444b;
overflow: hidden;
position: absolute;
}
.content-carrousel figure:nth-child(1){ transform: rotateY(0deg) translateZ(300px); }
.content-carrousel figure:nth-child(2) { transform: rotateY(60deg) translateZ(300px); }
.content-carrousel figure:nth-child(3) { transform: rotateY(120deg) translateZ(300px); }
.content-carrousel figure:nth-child(4) { transform: rotateY(180deg) translateZ(300px); }
.content-carrousel figure:nth-child(5) { transform: rotateY(240deg) translateZ(300px); }
.content-carrousel figure:nth-child(6) { transform: rotateY(300deg) translateZ(300px); }
.shadow {
position: absolute;
box-shadow: 0px 0px 20px 0px #000;
border-radius: 1px;
}
.content-carrousel img {
image-rendering: auto;
transition: all 300ms;
width: 100%;
height: 100%;
}
.content-carrousel img:hover {
transform: scale(1.2);
transition: all 300ms;
}
@keyframes rotar {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
z-index: 2;
}
}
我希望旋转木马的远图像在我有 jsfiddle https://jsfiddle.net/m_studio/y8phLf23/3/的中心图像后面 (希望它是正确的,这是我做的第一个)
解决方案
推荐阅读
- elasticsearch - Ansible:从 group_vars 派生的 ip 周围的引号
- linux - QEMUI/KVM virtio-serial 没有主机到 VM 的连接
- asp.net - DB_Context 与 ASP.NET Core 中的多个表
- unit-testing - 在 kotlin 中使用 mockito,如何使用 ArgumentCaptor
> 在函数的测试中需要 Map - javascript - 无法在 firebase.json 文件中关闭谷歌分析反应原生
- scrollbar - 如何更改 RichTx32.ocx 的属性
- windows - python和pip命令在vs代码集成终端中不起作用,但在外部终端中起作用
- java - 当我们有第一个@RequestParam 的值时,如何使第二个@RequestParam 成为强制性的?
- python - 如何将形状(100,600,600)的 3d 数组堆叠成(600,600)的 2d 数组?
- javascript - 当文本输入不为空时,确保复选框保持选中状态?