js+css3图片3D旋转轮播

1、新建html文档。

3、书写hmtl代艨位雅剖码。<h2>Eight images, with 80px gap</h2> <div class="carousel" data-gap="80"> <figure> <img src="img/1.jpg" > <img src="img/2.jpg" > <img src="img/3.jpg" > <img src="img/4.jpg" > <img src="img/5.jpg" > <img src="img/6.jpg" > <img src="img/7.jpg" > <img src="img/8.jpg" > </figure> <nav> <button class="nav prev">Prev</button> <button class="nav next">Next</button> </nav> </div>

5、书写并添加js代码。<script> 'use strict'; window.addEventListener('load', function () { var carousels = document.querySelectorAll('.carousel'); for (var i = 0; i < carousels.length; i++) { carousel(carousels[i]); } }); 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;</script>

7、查看效果。