3d旋转图⽚制作HTML,jscss3制作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
实现特效的代码js
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));
ansformOrigin = '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].ansformOrigin = '50% 50% ' + -apothem + 'px';
images[i].ansform = '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 (UpperCase() != 'BUTTON') return;
if (ains('next')) {
currImage++;
} else {
currImage--;
}
rotateCarousel(currImage);
}
}
function rotateCarousel(imageIndex) {
ansform = 'rotateY(' + imageIndex * -theta + 'rad)'; }
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。