3d转盘效应 [英] 3d Carousel Effect

查看：196 发布时间：2017/2/18 20:15:12 html css3 plugins 3d carousel

本文介绍了3d转盘效应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

如何在CSS3中使用3D旋转木马效果？

解决方案

在Stack Overflow我们喜欢轮播！

我们可以从选择很多转盘，它们可以略有不同。一些使用Javascript，其他只是纯CSS。因为有很多可供选择，这里只是几个不同的样品。但是，请注意，如果需要，我将要求您提出关于如何工作的任何澄清问题，因为解释每一个都会重复，有一些细微的差别。有些还包括预编译器（即 LESS 或 SASS ，以便正常工作）：

  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;颜色：＃4e4e4e; text-align：center; margin-bottom：-100px;}＃wrapper {width：960px; margin：0 auto;}＃wrapper {透视：2500; -webkit透视：2500; width：800px; margin：200px auto 0 auto;透视原点：50％150px; -webkit-perspective-origin：50％150px;过渡：透视，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）; }到{transform：rotateY（-360deg）; -o-变换：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;动画：旋转24s无限线性; -moz-animation：spin 24s无限线性; -o-animation：spin 24s无限线性; -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：rotationY（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>在Chrome或Safari中查看< / h1> < h3>（悬停以暂停）< / 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

  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;显示：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：所有0.4s缓入; -moz-transition：all 0.4s ease-in-out; - 转换：全0.4s缓入; z-index：0;} / *由于插入阴影不会在图像中播放，我们将创建一个伪元素并将我们的图像样式应用于* /＃scroller .item：before {border-radius：10px; width：500px;显示：block; content：''; position：absolute; width：100％;高度：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： 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） -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;显示：block; height：30px; width：30px; background-color：rgba（0，0，0，0.85）; border-radius：15px;颜色：＃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 =itemhref =＃> < img src =http://i.imgur.com/5Mk3EfW.jpg/> < / a> < a class =itemhref =＃> < img src =http://i.imgur.com/79aU67L.jpg/> < / a> < a class =itemhref =＃> < img src =http://i.imgur.com/x3wSoFU.jpg/> < / a> < a class =itemhref =＃> < img src =http://i.imgur.com/27fTqbA.jpg/> < / a> < a class =itemhref =＃> < img src =http://i.imgur.com/RjdFV6n.jpg/> < / a> < a class =itemhref =＃> < img src =http://i.imgur.com/6W8JOza.jpg/> < / a> < a class =itemhref =＃> < img src =http://i.imgur.com/rwLY1JH.jpg/> < / a>< / div>

快速示例3

  $（function（）{$（'figure'）。on '; 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;位置：相对;透视：1000px; margin：50px auto; border：1px solid #bbb;}＃carousel {width：100％;高度：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：rotationY（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） }到{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）;位置：相对; margin：0; width：500px; height：300px; -webkit-transition：1s; } .carousel img {position：absolute; border：15px solid rgba（0，0，0，.8）;不透明度：.5; -webkit-transition：1s; width：500px; height：300px;背景：#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;背景：#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;背景：#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）不透明度：1; } input [value =2]：checked〜.container。carousel img：nth-child（2）{-webkit-transform：rotateY（45deg）translateZ不透明度：1; } input [value =3]：checked〜.container。carousel img：nth-child（3）{-webkit-transform：rotateY（90deg）translateZ（540px）不透明度：1; } input {value =4]：checked〜.container。carousel img：nth-child（4）{-webkit-transform：rotateY（135deg）translateZ（540px）不透明度：1; } input [value =5]：checked〜.container。carousel img：nth-child（5）{-webkit-transform：rotateY（180deg）translateZ不透明度：1; } input {value =6]：checked〜.container。carousel img：nth-child（6）{-webkit-transform：rotateY（225deg）translateZ不透明度：1; } input [value =7]：checked〜.container。carousel img：nth-child（7）{-webkit-transform：rotateY（270deg）translateZ不透明度：1; } input [value =8]：checked〜.container。carousel img：nth-child（8）{-webkit-transform：rotateY（315deg）translateZ不透明度：1; }

 < body& < div> < input checked id =onename =multiplestype =radiovalue =1> < label for =one> 1< / label> < input id =twoname =multiplestype =radiovalue =2> < label for =two> 2< / label> < input id =threename =multiplestype =radiovalue =3> < label for =three> 3< / label> < input id =fourname =multipleplestype =radiovalue =4> < label for =four> 4< / label> < input id =fivename =multipleplestype =radiovalue =5> < label for =five> 5< / label> < input id =sixname =multiplestype =radiovalue =6> < label for =six> 6< / label> < input id =sevenname =multipleplestype =radiovalue =7> < label for =seven> 7< / label> < input id =eightname =multiplestype =radiovalue =8> < label for =eight> 8< / label> < div class =container> < div class =carousel> < img src =images / 1.jpgalt =Landscape 1> < img src =images / 2.jpgalt =Landscape 2> < img src =images / 3.jpgalt =Landscape 3> < img src =images / 4.jpgalt =Landscape 4> < img src =images / 5.jpgalt =Landscape 5> < img src =images / 6.jpgalt =Landscape 6> < img src =images / 7.jpgalt =Landscape 7> < img src =images / 8.jpgalt =Landscape 8> < / div> < / div> < / div>< / body>

快速示例5

使用SCSS 〜source

quick sample 6

< snippet-code snippet-current-hidden>

  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; //为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， } //事件侦听器和相关函数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（）; }\t\t（细节） ？ 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

  img {position：fixed; visibility：hidden; }

 < h2> 3D可选项目的Carousel效果< / h2>< p>将鼠标悬停在画布上以旋转轮播。 < / p>< canvas id =mycanvaswidth =750height =375>< / canvas>< img src = http://scrawl.rikweb.org.uk/img/carousel/angelfish.pngid =angelfishclass =demo/>< img src =http://scrawl.rikweb.org。 uk / img / carousel / blackbutterfly.pngid =blackbutterflyclass =demo/>< img src =http://scrawl.rikweb.org.uk/img/carousel/cagedparrot.pngid =cagedparrotclass =demo/>< img src =http://scrawl.rikweb.org.uk/img/carousel/capuchin.pngid =capuchinclass =demo/> ;< img src =http://scrawl.rikweb.org.uk/img/carousel/greenparrot.pngid =greenparrotclass =demo/>< img src =http：// scrawl.rikweb.org.uk/img/carousel/ibis.pngid =ibisclass =demo/>< img src =http://scrawl.rikweb.org.uk/img/crousel /kookaburra.pngid =kookaburraclass =demo/>< img src =http://scrawl.rikweb.org.uk/img/carousel/peacock.pngid =peacock类=demo/>< img src =http://scrawl.rikweb.org.uk/img/carousel/pelican.pngid =pelicanclass =demo/>< img src =http://scrawl.rikweb.org.uk/img/carousel/pinkcockatoo.pngid =pinkcockatooclass =demo/>< img src =http://scrawl.rikweb.org .uk / img / carousel / swallowtail.pngid =swallowtailclass =demo/>< img src =http://scrawl.rikweb.org.uk/img/carousel/swan.png id =swanclass =demo/>< img src =http://scrawl.rikweb.org.uk/img/carousel/tabbycats.pngid =tabbycatsclass =demo/ >< img src =http://scrawl.rikweb.org.uk/img/carousel/terrapin.pngid =terrapinclass =demo/>< img src =http：/ /scrawl.rikweb.org.uk/img/carousel/turkey.pngid =turkeyclass =demo/>< script src =http://scrawl.rikweb.org.uk/js/ scrawlCore-min.js>< / script>

 
 
 
 
 
 替代品/教程
 
 
 
 
 
  
  像这可能就是您要找的。 
 
    
 
 
   这是另一个很好的例子 
 
 
   href =http://www.brenelz.com/blog/creating-a-3d-carousel-from-scratch/ =nofollow>另一个精彩教程 
 
 
 
 
How to have a 3D Carousel Effect in CSS3 ?
 解决方案 


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


                        这篇关于3d转盘效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

3d转盘效应 [英] 3d Carousel Effect

问题描述

在Stack Overflow我们喜欢轮播！

替代品/教程

Here at Stack Overflow we love Carousels!

Alternatives/Tutorials

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

3d转盘效应 [英] 3d Carousel Effect

问题描述

在Stack Overflow我们喜欢轮播！

替代品/教程

Here at Stack Overflow we love Carousels!

Alternatives/Tutorials

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭