3d 轮播 – 有爱前端

https://codepen.io/SitePoint/pen/gRJWqm

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D Rotating Carousel with CSS and JavaScript</title> <style type="text/css"> body { margin: 0; font-family: 'Roboto', sans-serif; font-size: 16px; } h1 { text-align: center; margin-bottom: 1.5em; } h2 { text-align: center; color: #555; margin-bottom: 0; } .carousel { padding: 20px; -webkit-perspective: 500px; perspective: 500px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .carousel > * { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .carousel figure { margin: 0; width: 40%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } .carousel figure img { width: 100%; box-sizing: border-box; padding: 0 0px; } .carousel figure img:not(:first-of-type) { position: absolute; left: 0; top: 0; } .carousel nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 20px 0 0; } .carousel nav button { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0 5px; cursor: pointer; color: #333; background: none; border: 1px solid; letter-spacing: 1px; padding: 5px 10px; } </style> </head> <body> <h1>3D Rotating Carousel Examples</h1> <h2>Three images</h2> <div class="carousel"> <figure> <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt=""> <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt=""> <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt=""> </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Four images</h2> <div class="carousel"> <figure> <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt=""> <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt=""> <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt=""> <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt=""> </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Eight images</h2> <div class="carousel"> <figure> <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt=""> <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt=""> <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt=""> <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt=""> <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt=""> <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt=""> <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt=""> <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt=""> </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Eight images, with 20px gap</h2> <div class="carousel" data-gap="20"> <figure> <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt=""> <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt=""> <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt=""> <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt=""> <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt=""> <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt=""> <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt=""> <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt=""> </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Eight images, with 80px gap</h2> <div class="carousel" data-gap="80"> <figure> <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt=""> <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt=""> <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt=""> <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt=""> <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt=""> <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt=""> <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt=""> <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt=""> </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> <h2>Hidden backfaces</h2> <div class="carousel" data-gap="20" data-bfc> <figure> <img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt=""> <img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt=""> <img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt=""> <img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt=""> <img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt=""> <img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt=""> <img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt=""> <img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt=""> </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div> </body>  <script type="text/javascript"> "use strict"; "object" != typeof window.CP && (window.CP = {}), window.CP.PenTimer = { programNoLongerBeingMonitored: !1, timeOfFirstCallToShouldStopLoop: 0, _loopExits: {}, _loopTimers: {}, START_MONITORING_AFTER: 2e3, STOP_ALL_MONITORING_TIMEOUT: 5e3, MAX_TIME_IN_LOOP_WO_EXIT: 2200, exitedLoop: function(o) { this._loopExits[o] = !0 }, shouldStopLoop: function(o) { if(this.programKilledSoStopMonitoring) return !0; if(this.programNoLongerBeingMonitored) return !1; if(this._loopExits[o]) return !1; var t = this._getTime(); if(0 === this.timeOfFirstCallToShouldStopLoop) return this.timeOfFirstCallToShouldStopLoop = t, !1; var i = t - this.timeOfFirstCallToShouldStopLoop; if(i < this.START_MONITORING_AFTER) return !1; if(i > this.STOP_ALL_MONITORING_TIMEOUT) return this.programNoLongerBeingMonitored = !0, !1; try { this._checkOnInfiniteLoop(o, t) } catch(o) { return this._sendErrorMessageToEditor(), this.programKilledSoStopMonitoring = !0, !0 } return !1 }, _sendErrorMessageToEditor: function() { try { if(this._shouldPostMessage()) { var o = { action: "infinite-loop", line: this._findAroundLineNumber() }; parent.postMessage(JSON.stringify(o), "*") } else this._throwAnErrorToStopPen() } catch(o) { this._throwAnErrorToStopPen() } }, _shouldPostMessage: function() { return document.location.href.match(/boomerang/) }, _throwAnErrorToStopPen: function() { throw "We found an infinite loop in your Pen. We've stopped the Pen from running. Please correct it or contact support@codepen.io." }, _findAroundLineNumber: function() { var o = new Error, t = 0; if(o.stack) { var i = o.stack.match(/boomerang\S+:(\d+):\d+/); i && (t = i[1]) } return t }, _checkOnInfiniteLoop: function(o, t) { if(!this._loopTimers[o]) return this._loopTimers[o] = t, !1; var i = t - this._loopTimers[o]; if(i > this.MAX_TIME_IN_LOOP_WO_EXIT) throw "Infinite Loop found on loop: " + o }, _getTime: function() { return +new Date } }, window.CP.shouldStopExecution = function(o) { var t = window.CP.PenTimer.shouldStopLoop(o); return t === !0 && console.warn("[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"), t }, window.CP.exitedLoop = function(o) { window.CP.PenTimer.exitedLoop(o) }; </script> <script type="text/javascript"> 'use strict'; window.addEventListener('load', function () { var carousels = document.querySelectorAll('.carousel'); for (var i = 0; i < carousels.length; i++) {if (window.CP.shouldStopExecution(1)){break;} carousel(carousels[i]); } window.CP.exitedLoop(1); }); function carousel(root) { var figure = root.querySelector('figure'), nav = root.querySelector('nav'), images = figure.children, n = images.length, gap = root.dataset.gap || 0, bfc = 'bfc' in root.dataset, theta = 2 * Math.PI / n, currImage = 0; setupCarousel(n, parseFloat(getComputedStyle(images[0]).width)); window.addEventListener('resize', function () { setupCarousel(n, parseFloat(getComputedStyle(images[0]).width)); }); setupNavigation(); function setupCarousel(n, s) { var apothem = s / (2 * Math.tan(Math.PI / n)); figure.style.transformOrigin = '50% 50% ' + -apothem + 'px'; for (var i = 0; i < n; i++) {if (window.CP.shouldStopExecution(2)){break;} images[i].style.padding = gap + 'px'; } window.CP.exitedLoop(2); for (i = 1; i < n; i++) {if (window.CP.shouldStopExecution(3)){break;} images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px'; images[i].style.transform = 'rotateY(' + i * theta + 'rad)'; } window.CP.exitedLoop(3); if (bfc) for (i = 0; i < n; i++) {if (window.CP.shouldStopExecution(4)){break;} images[i].style.backfaceVisibility = 'hidden'; } window.CP.exitedLoop(4); rotateCarousel(currImage); } function setupNavigation() { nav.addEventListener('click', onClick, true); function onClick(e) { e.stopPropagation(); var t = e.target; if (t.tagName.toUpperCase() != 'BUTTON') return; if (t.classList.contains('next')) { currImage++; } else { currImage--; } rotateCarousel(currImage); } } function rotateCarousel(imageIndex) { figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)'; } } </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 3d 轮播