Untitled Application
MyApp
Author name
1.0
False
800
500
False
False
False
WebApp
False
C:\Users\sinli\Documents\VisualNeoWeb\Libraries\img\default-icon.png
.scene {
border: 1px solid #CCC;
margin: 40px 0;
position: relative;
width: 210px;
height: 140px;
margin: 40px auto;
perspective: 1000px;
}
.carousel {
width: 100%;
height: 100%;
position: absolute;
transform: translateZ(-288px);
transform-style: preserve-3d;
transition: transform 1s;
}
.carousel__cell {
position: absolute;
width: 190px;
height: 120px;
left: 10px;
top: 10px;
border: 2px solid black;
line-height: 116px;
font-size: 80px;
font-weight: bold;
color: white;
text-align: center;
}
.carousel__cell:nth-child(9n+1) { background: hsla( 0, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+2) { background: hsla( 40, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+3) { background: hsla( 80, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+4) { background: hsla(120, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+5) { background: hsla(160, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+6) { background: hsla(200, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+7) { background: hsla(240, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+8) { background: hsla(280, 100%, 50%, 0.8); }
.carousel__cell:nth-child(9n+0) { background: hsla(320, 100%, 50%, 0.8); }
.carousel__cell:nth-child(1) { transform: rotateY( 0deg) translateZ(288px); }
.carousel__cell:nth-child(2) { transform: rotateY( 40deg) translateZ(288px); }
.carousel__cell:nth-child(3) { transform: rotateY( 80deg) translateZ(288px); }
.carousel__cell:nth-child(4) { transform: rotateY(120deg) translateZ(288px); }
.carousel__cell:nth-child(5) { transform: rotateY(160deg) translateZ(288px); }
.carousel__cell:nth-child(6) { transform: rotateY(200deg) translateZ(288px); }
.carousel__cell:nth-child(7) { transform: rotateY(240deg) translateZ(288px); }
.carousel__cell:nth-child(8) { transform: rotateY(280deg) translateZ(288px); }
.carousel__cell:nth-child(9) { transform: rotateY(320deg) translateZ(288px); }
en
#000000
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
BeginJS
var carousel = document.querySelector('.carousel');
var cellCount = 9;
var selectedIndex = 0;
function rotateCarousel() {
var angle = selectedIndex / cellCount * -360;
carousel.style.transform = 'translateZ(-288px) rotateY(' + angle + 'deg)';
}
var prevButton = document.querySelector('.previous-button');
prevButton.addEventListener( 'click', function() {
selectedIndex--;
rotateCarousel();
});
var nextButton = document.querySelector('.next-button');
nextButton.addEventListener( 'click', function() {
selectedIndex++;
rotateCarousel();
});
EndJS
100px
110px
600px
220px
<div class="scene">
<div class="carousel">
<div class="carousel__cell">1</div>
<div class="carousel__cell">2</div>
<div class="carousel__cell">3</div>
<div class="carousel__cell">4</div>
<div class="carousel__cell">5</div>
<div class="carousel__cell">6</div>
<div class="carousel__cell">7</div>
<div class="carousel__cell">8</div>
<div class="carousel__cell">9</div>
</div>
</div>
298px
350px
100px
50px
previous-button
Previous
408px
350px
100px
50px
next-button
Next
0px
0px
1024px
600px
False