在Stack Overflow，我们喜欢旋转木马！

Question

如何在CSS3中使用3D轮播效果？

Answer 1

在Stack Overflow，我们喜欢旋转木马！

我们可以选择很多旋转木马，所有这些都可以略有不同。有些人使用Javascript，有些人只是纯粹的CSS。由于有很多可供选择，这里只是几个不同的样本。但请注意，如果需要的话，我会向你提出任何关于“它们如何工作”的澄清问题，因为解释每一个都会变得重复，但有一些细微的差别。有些还包括预编译器（即 LESS 或 SASS ，以便正常工作）：

快速样本1

body {
	background: #eee;
	font-family: arial, helvetica, sans-serif;
	margin: 50px auto;
	padding: 0;
}

h1 {
  font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
  font-size: 36px;
  text-align: center;
}
h3 {
  font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif;
  font-size: 22px;
  font-style: italic;
  color: #4e4e4e;
  text-align: center;
  margin-bottom: -100px;
}

#wrapper {
	width: 960px;
	margin: 0 auto;
}

#wrapper {
  perspective: 2500;
	-webkit-perspective: 2500;
	width: 800px;
	margin: 200px auto 0 auto;
  perspective-origin: 50% 150px;
	-webkit-perspective-origin: 50% 150px;
  transition: perspective, 1s;
  -o-transition: -o-perspective, 1s;
  -moz-transition: -moz-perspective, 1s;
	-webkit-transition: -webkit-perspective, 1s;
}

#image:hover {
  animation-play-state:paused;
  -o-animation-play-state:paused;
  -moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}


@-webkit-keyframes spin {
	from {
    transform: rotateY(0);
    -o-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -moz-transform: rotateY(0);
		-webkit-transform: rotateY(0);
	}
	to {
    transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
		-webkit-transform: rotateY(-360deg);
	}
}

#image {
	margin: 0 auto;
	height: 300px;
	width: 400px;
  transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
  animation: spin 24s infinite linear;
  -moz-animation: spin 24s infinite linear;
  -o-animation: spin 24s infinite linear;
	-webkit-animation: spin 24s infinite linear;
}

.image {
	position: absolute;
	height: 300px;
	width: 400px;
  border-radius: 25px;
	background-color: rgba(0,0,0,0.6);
	text-align: center;
	font-size: 20em;
	color: #fff;
}

#image > .i1 {
  transform: translateZ(485px);
  -moz-transform: translateZ(485px);
  -o-transform: translateZ(485px);
  -ms-transform: translateZ(485px);
  -webkit-transform: translateZ(485px);
}
#image > .i2 {
  transform: rotateY(45deg) translateZ(485px);
  -moz-transform: rotateY(45deg) translateZ(485px);
  -o-transform: rotateY(45deg) translateZ(485px);
  -ms-transform: rotateY(45deg) translateZ(485px);
  -webkit-transform: rotateY(45deg) translateZ(485px);
}
#image > .i3 {
  transform: rotateY(90deg) translateZ(485px);
  -moz-transform: rotateY(90deg) translateZ(485px);
  -o-transform: rotateY(90deg) translateZ(485px);
  -ms-transform: rotateY(90deg) translateZ(485px);
  -webkit-transform: rotateY(90deg) translateZ(485px);
}
#image > .i4 {
  transform: rotateY(135deg) translateZ(485px);
  -moz-transform: rotateY(135deg) translateZ(485px);
  -o-transform: rotateY(135deg) translateZ(485px);
  -ms-transform: rotateY(135deg) translateZ(485px);
  -webkit-transform: rotateY(135deg) translateZ(485px);
}
#image > .i5 {
  transform: rotateY(180deg) translateZ(485px);
  -moz-transform: rotateY(180deg) translateZ(485px);
  -o-transform: rotateY(180deg) translateZ(485px);
  -ms-transform: rotateY(180deg) translateZ(485px);
  -webkit-transform: rotateY(180deg) translateZ(485px);
}
#image > .i6 {
  transform: rotateY(225deg) translateZ(485px);
  -moz-transform: rotateY(225deg) translateZ(485px);
  -o-transform: rotateY(225deg) translateZ(485px);
  -ms-transform: rotateY(225deg) translateZ(485px);
  -webkit-transform: rotateY(225deg) translateZ(485px);
}
#image > .i7 {
  transform: rotateY(270deg) translateZ(485px);
  -moz-transform: rotateY(270deg) translateZ(485px);
  -o-transform: rotateY(270deg) translateZ(485px);
  -ms-transform: rotateY(270deg) translateZ(485px);
  -webkit-transform: rotateY(270deg) translateZ(485px);
}
#image > .i8 {
  transform: rotateY(315deg) translateZ(485px);
  -moz-transform: rotateY(315deg) translateZ(485px);
  -o-transform: rotateY(315deg) translateZ(485px);
  -ms-transform: rotateY(315deg) translateZ(485px);
  -webkit-transform: rotateY(315deg) translateZ(485px);
}

img {
  border-radius: 25px;

<body>
  <h1>View in Chrome or Safari</h1>
  <h3>(hover over to pause)</h3>
	<div id="wrapper">
		<div id="image">
			<div class="image i1"><img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg"></div>
			<div class="image i2"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg"></div>
			<div class="image i3"><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg"></div>
			<div class="image i4"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg"></div>
			<div class="image i5"><img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg"></div>
			<div class="image i6"><img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg"></div>
			<div class="image i7"><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg"></div>
			<div class="image i8"><img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg"></div>
		</div>
	</div>
</body>

快速样本2

/* Create an array to hold the different image positions */
var itemPositions = [];
var numberOfItems = $('#scroller .item').length;

/* Assign each array element a CSS class based on its initial position */
function assignPositions() {
  for (var i = 0; i < numberOfItems; i++) {
    if (i === 0) {
      itemPositions[i] = 'left-hidden';
    } else if (i === 1) {
      itemPositions[i] = 'left';
    } else if (i === 2) {
      itemPositions[i] = 'middle';
    } else if (i === 3) {
      itemPositions[i] = 'right';
    } else {
      itemPositions[i] = 'right-hidden';
    }
  }
  /* Add each class to the corresponding element */
  $('#scroller .item').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* To scroll, we shift the array values by one place and reapply the classes to the images */
function scroll(direction) {
  if (direction === 'prev') {
    itemPositions.push(itemPositions.shift());
  } else if (direction === 'next') {
    itemPositions.unshift(itemPositions.pop());
  }
  $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) {
    $(this).addClass(itemPositions[index]);
  });
}

/* Do all this when the DOMs ready */
$(document).ready(function() {

  assignPositions();
  var autoScroll = window.setInterval("scroll('next')", 4000);

  /* Hover behaviours */
  $('#scroller').hover(function() {
    window.clearInterval(autoScroll);
    $('.nav').stop(true, true).fadeIn(200);
  }, function() {
    autoScroll = window.setInterval("scroll('next')", 4000);
    $('.nav').stop(true, true).fadeOut(200);
  });

  /* Click behaviours */
  $('.prev').click(function() {
    scroll('prev');
  });
  $('.next').click(function() {
    scroll('next');
  });

});

html,
body {
  height: 100%;
  margin: 0;
}
body {
  background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);
}
.warning {
  margin: 10px auto 0;
  width: 500px;
  text-align: center;
  font-size: 20px;
}
#scroller {
  width: 500px;
  height: 200px;
  margin: 0 auto;
  padding: 50px 0;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  -o-perspective: 500px;
}
#scroller .item {
  width: 500px;
  display: block;
  position: absolute;
  border-radius: 10px;
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15)));
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  z-index: 0;
}
/* Since inset shadows don't play nice with images, we'll create a pseudo element and apply our image styling to that instead */

#scroller .item:before {
  border-radius: 10px;
  width: 500px;
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);
}
#scroller .item img {
  display: block;
  border-radius: 10px;
}
#scroller .left {
  -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
  -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);
}
#scroller .middle {
  z-index: 1;
  -webkit-transform: rotateY(0deg) translateX(0) scale(1);
  -moz-transform: rotateY(0deg) translateX(0) scale(1);
  -o-transform: rotateY(0deg) translateX(0) scale(1);
}
#scroller .right {
  -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
  -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);
}
#scroller .left-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
  -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);
}
#scroller .right-hidden {
  opacity: 0;
  z-index: -1;
  -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
  -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);
}
.nav {
  position: absolute;
  width: 500px;
  height: 30px;
  margin: 170px 0 0;
  z-index: 2;
  display: none;
}
.prev,
.next {
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  background-color: rgba(0, 0, 0, 0.85);
  border-radius: 15px;
  color: #E4E4E4;
  bottom: 15px;
  left: 15px;
  text-align: center;
  line-height: 26px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}
.next {
  left: inherit;
  right: 15px;
}
.prev:hover,
.next:hover {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="scroller">
  <div class="nav">
    <a class="prev">&laquo;</a>
    <a class="next">&raquo;</a>
  </div>
  <a class="item" href="#">
    <img src="http://i.imgur.com/5Mk3EfW.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/79aU67L.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/x3wSoFU.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/27fTqbA.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/RjdFV6n.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/6W8JOza.jpg" />
  </a>
  <a class="item" href="#">
    <img src="http://i.imgur.com/rwLY1JH.jpg" />
  </a>
</div>

快速样本3

$(function(){
  $('figure').on('click', function(){
    var nx = $(this).next().data('number') -1;
    if(nx<0){nx =0;}
    var delta =  -360 /9 * nx; 
   
    
    $(this).parent().css("transform", "translateZ( -288px ) rotateY(" + delta + "deg )");

  });
})

.container {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
  margin: 50px auto;
  border: 1px solid #bbb;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(-288px);
  transition: all 1s ease-in;
}

figure{margin: 0;}
#carousel figure {
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
}

/* 40deg = 360/9 */
#carousel figure:nth-child(1) { transform: rotateY(   0deg ) translateZ( 288px ); }
#carousel figure:nth-child(2) { transform: rotateY(  40deg ) translateZ( 288px ); }
#carousel figure:nth-child(3) { transform: rotateY(  80deg ) translateZ( 288px ); }
#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }
#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }
#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }
#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }
#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }
#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }

.active{
  transform: translateZ( -288px ) rotateY( -160deg );
}

@keyframes spin {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

#carousel {
	animation: spin 10s infinite linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
  <div id="carousel">
    <figure data-number="1">1</figure>
    <figure data-number="2">2</figure>
    <figure data-number="3">3</figure>
    <figure data-number="4">4</figure>
    <figure data-number="5">5</figure>
    <figure data-number="6">6</figure>
    <figure data-number="7">7</figure>
    <figure data-number="8">8</figure>
    <figure data-number="9">9</figure>
  </div>
</section>

快速样本4：最佳IMO

body > div {
		width: 500px;
		margin: 50px auto;
		text-align: center;
	}

	figure {
		margin: 0;
	}

	.container {
		width: 500px;
		height: 300px;
		text-align: left;
		margin: 60px auto;
		-webkit-perspective: 1000px;
		-webkit-perspective-origin: 50% -25%;
	}

		.carousel {
			-webkit-transform-style: preserve-3d;
			-webkit-transform: translateZ(-540px);
			position: relative;
			margin: 0;
			width: 500px;
			height: 300px;
			-webkit-transition: 1s;
		}

			.carousel img {
				position: absolute;
				border: 15px solid rgba(0, 0, 0, .8);
				opacity: .5;
				-webkit-transition: 1s;
        width: 500px;
        height: 300px;
        background:#ccc;
			}

				
				.carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); }
				.carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); }
				.carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); }

	label {
		cursor: pointer;
		background: #eee;
		display: inline-block;
		border-radius: 50%;
		width: 30px;
		padding-top: 7px;
		height: 23px;
		font: .9em Arial;
	}

	label:hover {
		background: #ddd;
	}

	input {
		position: absolute;
		left: -9999px;
	}

	input:checked + label {
		font-weight: bold;
		background: #ddd;
	}

		input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); }
		input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); }
		input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); }
		input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); }
		input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); }
		input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); }
		input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); }
		input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); }

		input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; }
		input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; }
		input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }

<body>

	<div>

		<input checked id="one" name="multiples" type="radio" value="1">
        <label for="one">1</label>

		<input id="two" name="multiples" type="radio" value="2">
        <label for="two">2</label>

        <input id="three" name="multiples" type="radio" value="3">
        <label for="three">3</label>

        <input id="four" name="multiples" type="radio" value="4">
        <label for="four">4</label>

        <input id="five" name="multiples" type="radio" value="5">
        <label for="five">5</label>

        <input id="six" name="multiples" type="radio" value="6">
        <label for="six">6</label>

        <input id="seven" name="multiples" type="radio" value="7">
        <label for="seven">7</label>

        <input id="eight" name="multiples" type="radio" value="8">
        <label for="eight">8</label>

		<div class="container">
			<div class="carousel">
				<img src="images/1.jpg" alt="Landscape 1">
				<img src="images/2.jpg" alt="Landscape 2">
				<img src="images/3.jpg" alt="Landscape 3">
				<img src="images/4.jpg" alt="Landscape 4">
				<img src="images/5.jpg" alt="Landscape 5">
				<img src="images/6.jpg" alt="Landscape 6">
				<img src="images/7.jpg" alt="Landscape 7">
				<img src="images/8.jpg" alt="Landscape 8">
			</div>
		</div>

	</div>

</body>

快速样本5

Uses SCSS ~source

快速样本6

var mycode = function(){
		
	//define variables
	var myPad = scrawl.pad.mycanvas, 
		here,
		details = false,
		myPic, 
		myPicPath, 
		mySprite, 
		mySpeed = 0,
		items = [
			'angelfish', 'blackbutterfly', 'cagedparrot', 'capuchin', 'greenparrot', 
			'ibis', 'kookaburra', 'peacock', 'pelican', 'pinkcockatoo', 
			'swallowtail', 'swan', 'tabbycats', 'terrapin', 'turkey'
			],
		myGroup,
		myReflections,
		carousel,
		selectImage,
		unselectImage,
		checkClick,
		updateCarousel;
	
	//set background color for canvas
	scrawl.cell[myPad.base].set({
		backgroundColor: 'black',
		});

	//import images into scrawl library
	scrawl.getImagesByClass('demo');

	//define groups
	myGroup = scrawl.newGroup({
		name:	'myGroup',
		order:	2,
		});
	myReflections = scrawl.newGroup({
		name:	'myReflections',
		order:	1,
		});
		
	//define sprites - carousel
	carousel = scrawl.makeEllipse({
		name: 		'carousel',
		startX:		375,
		startY:		200,
		radiusX:	300,
		radiusY:	100,
		method:		'none',
		});
		
	//define sprites - display photos
	for(var i = 0, z = items.length; i < z; i++){
		scrawl.newPicture({
			name:				items[i],
			group:				'myGroup',
			source:				items[i],
			width:				150,
			height:				100,
			strokeStyle:		'Gold',
			lineJoin:			'round',
			method:				'fillDraw',
			path:				'carousel',
			pathPlace:			i/z,
			pathSpeedConstant:	false,
			handleX:			'center',
			handleY:			'101%',
			}).clone({
			//and their reflections
			name:				items[i]+'_r',
			group:				'myReflections',
			globalAlpha:		0.32,
			flipUpend:			true,
			});
		}
		
	//event listener and associated functions
	selectImage = function(){
		myPic = myGroup.getSpriteAt(here);
		if(myPic){
			myPicPath = myPic.path;
			details = true;
			myPic.set({
				startX:		375,
				startY:		187.5,
				path:		false,
				scale:		3.7,
				order:		1000,
				handleY:	'center',
				});
			scrawl.sprite[myPic.name+'_r'].set({
				visibility:	false,
				});
			scrawl.render();
			}
		};
	unselectImage = function(){
		if(myPic){
			myPic.set({
				handleY:	'101%',
				path:		myPicPath,
				});
			scrawl.sprite[myPic.name+'_r'].set({
				visibility:	true,
				});
			}
		details = false;
		myPic = false;
		myPicPath = false;
		};
	checkClick = function(e){
		if(e){
			e.stopPropagation();
			e.preventDefault();
			}
		(details) ? unselectImage() : selectImage();
		};
	scrawl.canvas.mycanvas.addEventListener('mouseup', checkClick, false);
		
	//animation function
	updateCarousel = function(){
		if(!details){
			mySpeed = -((here.x - 375)/170000);
			for(var i = 0, z = items.length; i < z; i++){
				mySprite = scrawl.sprite[items[i]];
				mySprite.set({
					scale: (mySprite.start.y/250)+0.5,
					order: mySprite.start.y,
					deltaPathPlace: mySpeed,
					});
				mySprite = scrawl.sprite[items[i]+'_r'];
				mySprite.set({
					scale: (mySprite.start.y/250)+0.5,
					order: mySprite.start.y,
					deltaPathPlace: mySpeed,
					});
				}
			myGroup.updateStart();
			myReflections.updateStart();
			}
		myReflections.sortSprites();
		myGroup.sortSprites();
		myPad.stampBackground();
		for(var i = 0, z = items.length; i < z; i++){
			scrawl.sprite[myReflections.sprites[i]].stamp('clearWithBackground');
			scrawl.sprite[myReflections.sprites[i]].stamp();
			scrawl.sprite[myGroup.sprites[i]].stamp();
			}
		myPad.show();
		};

	//initial display of carousel - for safari
	here = {x: 350, y: 187.5, active: true};
	updateCarousel();
	updateCarousel();

	//animation object
	scrawl.newAnimation({
		fn: function(){
			here = myPad.getMouse();
			if(here.active){
				updateCarousel();
				}
			},
		});
	};
	
scrawl.loadModules({
	path: 'http://scrawl.rikweb.org.uk/js/',
	modules: ['images', 'animation', 'path', 'factories'],
	callback: function(){
		window.onload = function(){
			scrawl.init();
			mycode();
			};
		},
	});

img {
	position: fixed;
	visibility: hidden;
	}

<h2>3D Carousel effect with selectable items</h2>
<p>Move mouse over canvas to rotate the carousel. Click on an image to enlarge it, or to return to the carousel.</p>

<canvas id="mycanvas" width="750" height="375"></canvas>

<img src="http://scrawl.rikweb.org.uk/img/carousel/angelfish.png" id="angelfish" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/blackbutterfly.png" id="blackbutterfly" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/cagedparrot.png" id="cagedparrot" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/capuchin.png" id="capuchin" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/greenparrot.png" id="greenparrot" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/ibis.png" id="ibis" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/kookaburra.png" id="kookaburra" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/peacock.png" id="peacock" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/pelican.png" id="pelican" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/pinkcockatoo.png" id="pinkcockatoo" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/swallowtail.png" id="swallowtail" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/swan.png" id="swan" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/tabbycats.png" id="tabbycats" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/terrapin.png" id="terrapin" class="demo" />
<img src="http://scrawl.rikweb.org.uk/img/carousel/turkey.png" id="turkey" class="demo" />

<script src="http://scrawl.rikweb.org.uk/js/scrawlCore-min.js"></script>

替代品/教程

this之类的内容可能正是您所需要的。
Here's a slightly less exciting example，但不是一个好的开始
here's another good example
yet another great tutorial

3d旋转木马效果

1 个答案:

在Stack Overflow，我们喜欢旋转木马！

替代品/教程