3d旋转图片制作HTML,js css3制作3D旋转图片切换代码

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

代码结构

1. 引入CSS

2. HTML代码

3D Rotating Carousel Examples

Three images

Prev

Next

Four images

Prev

Next

Eight images

Prev

Next

Eight images, with 20px gap

Prev

Next

Eight images, with 80px gap

Prev

Next

Hidden backfaces

Prev

Next

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

}

}