![3d转盘效应]( "3d转盘效应")
本文介绍了3d转盘效应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 如何在CSS3中使用3D旋转木马效果？解决方案 在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;颜色：＃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 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 hereThere 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 1body {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">«</a> <a class="next">»</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 IMObody > 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 5Uses SCSS ~sourcequick sample 6var mycode = function(){//define variablesvar 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 canvasscrawl.cell[myPad.base].set({backgroundColor: 'black',});//import images into scrawl libraryscrawl.getImagesByClass('demo');//define groupsmyGroup = scrawl.newGroup({name:'myGroup',order:2,});myReflections = scrawl.newGroup({name:'myReflections',order:1,});//define sprites - carouselcarousel = scrawl.makeEllipse({name: 'carousel',startX:375,startY:200,radiusX:300,radiusY:100,method:'none',});//define sprites - display photosfor(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 reflectionsname:items[i]+'_r',group:'myReflections',globalAlpha:0.32,flipUpend:true,});}//event listener and associated functionsselectImage = 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 functionupdateCarousel = 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 safarihere = {x: 350, y: 187.5, active: true};updateCarousel();updateCarousel();//animation objectscrawl.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/Tutorialssomething like this may be what you're looking for.Here's a slightly less exciting example, but no-the-less a great starthere's another good exampleAnd yet another great tutorial 这篇关于3d转盘效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 09-13 13:07