我有一個影片無限自動滾動旋轉木馬。旋轉木馬的瓷磚傾斜，transform:rotateX(45deg)但它們會恢復，0deg因為自動滾動的影片有它自己的transform:. 由于影片是一個回圈，我希望瓷磚保持固定旋轉，因此每個回圈都不會出現口吃。
.slider {
background: none;
height: 600px;
margin: auto;
overflow:hidden;
position: relative;
display: flex;
align-items: center;
width: 100%;
}
.slider::before,
.slider::after {
content: "";
height: 100px;
position: absolute;
width: 200px;
z-index: 2;
}
.slide-track {
animation: scroll 5s linear infinite;
display: flex;
width: calc(300px * 14);
perspective: 9000px;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-300px * 7))}
}
.slide {
width: 300px;
height: 500px;
background-color: #17141d;
margin-left: 30px;
transform: rotateX(45deg) scale(0.8);
border-radius: 10px;
box-shadow: -1rem 0 3rem #000;
display: flex;
justify-content: center;
overflow: hidden;
flex-direction: column;
align-items: center;
} <div class="slider">
<div class="slide-track">
<div class="slide" ></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
</div>uj5u.com熱心網友回復：
該transform屬性同時接受多個值。在您的情況下，將keyframes宣告更改為：
@keyframes scroll {
0% { transform: translateX(0) rotateX(45deg) scale(0.8); }
100% { transform: translateX(calc(-300px * 7)) rotateX(45deg) scale(0.8); }
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/522789.html
標籤：css动画CSS动画css 转换
上一篇：CSS影片渲染-令人瞠目結舌