我正在做一架手风琴，我希望它是倾斜的，我不知道怎么解释，所以我分享了我想要的This what I want的图像
你可以在那里看到正常状态和悬停状态.在正常状态和悬停状态下，手风琴里不是直的，而是对角线，这意味着从上到下更宽，从下到更窄.我不知道怎么做，我想把编号和图标图像放在正常状态，并在悬停时显示详细的图标和文本，如你在图像中所看到的，这是我当前的代码
.accordion {
width: 100%;
display: flex;
justify-content: center;
height: 1000px;
}
.accordion li {
position: relative;
overflow: hidden;
flex: 0 0 80px;
cursor: pointer;
width: 357px; /* Normal state width */
height: 300px; /* Adjust the height as needed */
transition: width 0.3s; /* Added transition for smooth width change */
}
.accordion li:hover {
width: 500px; /* Hover state width */
}
.accordion li img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%); /* Convert image to grayscale */
transition: transform 0.3s; /* Added transition for smooth hover effect */
z-index: 1; /* Ensure the image appears below the text and overlay */
}
.accordion li::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.00) 0%,
#9D8B5B 99.94%
), rgba(33, 26, 9, 0.40);
z-index: 2;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s;
}
.accordion li:hover::before {
opacity: 1;
visibility: visible;
}
.accordion li span {
position: relative;
z-index: 3; /* Text is now above image and overlay */
color: #fff; /* Set text color to white */
transition: color 0.3s; /* Added transition for smooth color change */
}
.accordion li h2, .accordion li p {
position: relative;
z-index: 3; /* Text is now above image and overlay */
color: #fff !important; /* Set text color to white */
transition: color 0.3s; /* Added transition for smooth color change */
}
.accordion li:hover span, .accordion li:hover h2, .accordion li:hover p {
color: #000; /* Set text color to black on hover */
}
.accordion li,
.accordion li .content,
.accordion li .content span {
transition: 0.3s;
}
.accordion li .content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
color: #fff;
padding: 15px;
background: #02022e;
background: linear-gradient(
0deg,
rgb(0 0 0 / 70%) 10%,
rgb(255 255 255 / 0%) 100%
);
opacity: 0;
visibility: hidden;
}
.accordion li .content span {
position: absolute;
z-index: 4;
left: 50%;
bottom: 50px;
transform: translateX(-50%);
visibility: hidden;
opacity: 0;
}
.accordion li:hover {
flex: 0 1 260px;
scale: 1.1;
z-index: 10;
}
.accordion h2 {
font-weight: 400;
font-size: 24px;
line-height: 45px;
border-bottom: 2px solid #fff;
margin-bottom: 10px;
white-space: nowrap;
}
.accordion li:hover .content {
opacity: 1;
visibility: visible;
}
.accordion li:hover span {
transform: translateX(-50%);
opacity: 1;
visibility: visible;
}
.accordion-mainDiv{
display: flex;
flex-direction: row;
gap: 10px;
z-index: 30;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accordion 1</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<ul class="accordion">
<li>
<img src="./first_image.png" />
<div class="content">
<span>
<div class="accordion-mainDiv">
<img src="./stone-1.png" />
<div>
<h2 style="color: var(--color-gray-10, #FFF);
font-family: Ubuntu;
font-size: 48px;
font-style: normal;
font-weight: 300;
line-height: 54px; /* 112.5% */
text-transform: uppercase;">01.</h2>
<h2 style="color: var(--color-gray-10, #FFF);
font-family: Ubuntu;
font-size: 48px;
font-style: normal;
font-weight: 300;
line-height: 54px; /* 112.5% */
text-transform: uppercase;">IDENTIFIKATION</h2>
<p style="color: var(--color-gray-10, #FFF);
font-family: Ubuntu;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;">
Der Vertrieb ist nur dann erfolgreich, wenn eine effektive
Identifikation und Beschreibung des Angebots sowie eine
professionelle Kundenansprache zur Tagesordnung gehören. In
der Göker Akademie werden Methoden vermittelt, um potenzielle
Kunden gezielter zu identifizieren und ihre Bedürfnisse besser
zu verstehen.
</p>
</div>
</div>
</span>
</div>
</li>
<li>
<img src="./second_image.png" />
<div class="content">
<span>
<div class="accordion-mainDiv">
<img src="./stone-2.png" />
<div>
<h2>5</h2>
<p>Kelly Cox</p>
<p>Designer</p>
</div>
</div>
</span>
</div>
</li>
<li>
<img src="./third_image.png" />
<div class="content">
<span>
<div class="accordion-mainDiv">
<img src="./stone-3.png" />
<div>
<h2>5</h2>
<p>Kelly Cox</p>
<p>Designer</p>
</div>
</div>
</span>
</div>
</li>
<li>
<img src="./fourth_image.png" />
<div class="content">
<span>
<div class="accordion-mainDiv">
<img src="./stone-4.png" />
<div>
<h2>5</h2>
<p>Kelly Cox</p>
<p>Designer</p>
</div>
</div>
</span>
</div>
</li>
<li>
<img src="./fifth_image.png" />
<div class="content">
<span>
<div class="accordion-mainDiv">
<img src="./stone-5.png" />
<div>
<h2>5</h2>
<p>Kelly Cox</p>
<p>Designer</p>
</div>
</div>
</span>
</div>
</li>
</ul>
</body>
</html>这个效果也是3D效果，但我不想要手风琴的3D效果，它应该在悬停时通过停留在它的位置上扩展.我真的很感谢你在这方面的帮助.