特效描述：js css3 3D旋转图片切换，js css3酷炫的3D图片旋转切换，3D旋转的图片轮播代码。(不兼容IE6,7,8)

代码结构

1. 引入CSS

2. HTML代码

'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;

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++) {

images[i].style.padding = gap + 'px';

}for (i = 1; i < n; i++) {

images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';

images[i].style.transform = 'rotateY(' + i * theta + 'rad)';

}

if (bfc) for (i = 0; i < n; i++) {

images[i].style.backfaceVisibility = 'hidden';

}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)';

}

}