3d Carousel Effect [closed]

2019-01-11 22:03发布

站内文章 / CSS3
57 0 0

问题:

How to have a 3D Carousel Effect in CSS3 ?

回答1:

Here at Stack Overflow we love Carousels!

Sources found here

There are so many carousels we can choose from and they can all be made slightly differently. Some use Javascript, others just pure css. And since there are so many to choose from, here's just a few different samples. Please note, however, I am leaving it up to you to ask any clarification questions on 'how they work' if need be, as explaining each and every one would become repetitive, with some minor differences. Some also include precompilers (i.e LESS or SASS in order to work correctly):

quick sample 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>

quick sample 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>

quick sample 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>

quick sample 4: Best 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>

quick sample 5

Uses SCSS ~source

quick sample 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>

Alternatives/Tutorials

  • something like this may be what you're looking for.

  • Here's a slightly less exciting example, but no-the-less a great start

  • here's another good example

  • And yet another great tutorial



标签： html css3 plugins 3d carousel
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~