寻找纯CSS轮播，已经开始了一些，但仍不确定是否可行。摘录的目的是将图像左右移动，并在到达左端时使用transform: rotateY(0.25turn)进行backface-visibility: hidden; ;-)，然后将图像向左移动然后transform: rotateY(0.25turn)。希望问题清楚
是否可以使用当前代码片段构建CSS轮播？
@keyframes turn {
50% {
transform: rotateX(5deg) rotateY(0.5turn);
}
100% {
transform: rotateX(-5deg) rotateY(1turn);
}
}
body {
margin: 0;
overflow: hidden;
background: #000;
}
body .container {
position: absolute;
width: 100%;
height: 100%;
perspective: 700px;
}
body .container .carousel {
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 97px;
margin-left: -70px;
margin-top: -48.5px;
transform-style: preserve-3d;
transform: rotateX(-5deg) rotateY(0);
animation: turn 20s infinite linear;
}
body .container .carousel .slide {
position: absolute;
width: 140px;
height: 97px;
user-select: none;
}
body .container .carousel .slide:nth-child(1) {
transform: rotateY(0deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(2) {
transform: rotateY(36deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(3) {
transform: rotateY(72deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(4) {
transform: rotateY(108deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(5) {
transform: rotateY(144deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(6) {
transform: rotateY(180deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(7) {
transform: rotateY(216deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(8) {
transform: rotateY(252deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(9) {
transform: rotateY(288deg) translateZ(280px);
}
body .container .carousel .slide:nth-child(10) {
transform: rotateY(324deg) translateZ(280px);
}<div class="container">
<div class="carousel">
<img src="http://via.placeholder.com/300x200?text=01" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=02" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=03" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=04" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=05" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=06" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=07" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=08" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=09" alt="" class="slide">
<img src="http://via.placeholder.com/300x200?text=10" alt="" class="slide">
</div>
</div>最佳答案
* {
margin: 0;
padding: 0;
}
html {
background-color: #eefbf8;
background-image: radial-gradient(circle, hsla(0,0%,100%,.1), hsla(0,0%,0%,.75)),
linear-gradient(left, transparent 50%, hsla(0,0%,0%,.01) 50%);
background-position: 50% 75%, 50% 50%;
background-repeat: no-repeat, repeat;
background-size: 150% 150%, 3em 3em;
font-size: 100%;
min-height: 100%;
}
/**********/
/* Slider */
/**********/
.slider {
background-color: #fff;
box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
0 3px 1px hsla(0,0%,100%,.75),
0 -1px 1px 2px hsla(0,0%,0%,.1);
height: 18.75em;
left: 50%;
margin: -9.875em -13em;
padding: .5em;
position: absolute;
top: 50%;
width: 25em;
}
/* Frame */
.slider:before {
background-color: #22130c;
bottom: -2.5em;
box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
inset 0 -2px 1px hsla(0,0%,0%,.4),
0 5px 50px hsla(0,0%,0%,.25),
0 20px 20px -15px hsla(0,0%,0%,.2),
0 30px 20px -15px hsla(0,0%,0%,.15),
0 40px 20px -15px hsla(0,0%,0%,.1);
content: '';
left: -2.5em;
position: absolute;
right: -2.5em;
top: -2.5em;
z-index: -1;
}
/* Mat */
.slider:after {
background-color: #fff5e5;
bottom: -1.5em;
box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
0 -1px 1px 1px hsla(0,0%,0%,.4),
inset 0 2px 3px 1px hsla(0,0%,0%,.2),
inset 0 4px 3px 1px hsla(0,0%,0%,.2),
inset 0 6px 3px 1px hsla(0,0%,0%,.1);
content: '';
left: -1.5em;
position: absolute;
right: -1.5em;
top: -1.5em;
z-index: -1;
}
/* Slides */
.slider li {
box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
list-style:none;
position: absolute;
}
.slider input {
display: none;
}
/* Navigation */
.slider label {
background-color: #111;
background-image: linear-gradient(transparent, hsla(0,0%,0%,.25));
border: .2em solid transparent;
bottom: .5em;
border-radius: 100%;
cursor: pointer;
display: block;
height: .5em;
left: 24em;
opacity: 0;
position: absolute;
transition: .25s;
width: .5em;
visibility: hidden;
z-index: 10;
}
.slider label:after {
border-radius: 100%;
bottom: -.2em;
box-shadow: inset 0 0 0 .2em #111,
inset 0 2px 2px #000,
0 1px 1px hsla(0,0%,100%,.25);
content: '';
left: -.2em;
position: absolute;
right: -.2em;
top: -.2em;
}
.slider:hover label {
opacity: 1;
visibility: visible;
}
.slider input:checked + label {
background-color: #fff;
}
.slider:hover li:nth-child(1) label {
left: .5em;
}
.slider:hover li:nth-child(2) label {
left: 2em;
}
.slider:hover li:nth-child(3) label {
left: 3.5em;
}
.slider:hover li:nth-child(4) label {
left: 5em;
}
/* Images */
.slider img {
height: 18.75em;
opacity: 0;
transition: .25s;
width: 25em;
vertical-align: top;
visibility: hidden;
}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 10;
}
<ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<label for="slide1"></label>
<img src="https://dribbble.s3.amazonaws.com/users/322/screenshots/872485/coldchase.jpg" alt="Panel 1">
</li>
<li>
<input type="radio" id="slide2" name="slide">
<label for="slide2"></label>
<img src="https://dribbble.s3.amazonaws.com/users/322/screenshots/980517/icehut_sm.jpg" alt="Panel 2">
</li>
<li>
<input type="radio" id="slide3" name="slide">
<label for="slide3"></label>
<img src="https://dribbble.s3.amazonaws.com/users/322/screenshots/943660/hq_sm.jpg" alt="Panel 3">
</li>
<li><a href="http://cssslider.com/">
<input type="radio" id="slide4" name="slide">
<label for="slide4"></label>
<img src="https://dribbble.s3.amazonaws.com/users/322/screenshots/599584/home.jpg" alt="Panel 4"></a>
</li>
</ul>
<!-- Images from Craig Henry's Dribbble profile: http://dribbble.com/craighenry -->