锐客网

  1. 首页 > 睿知 > it技术 > >

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

特效描述：js css3 3D旋转图片切换，js css3酷炫的3D图片旋转切换，3D旋转的图片轮播代码。(不兼容IE6,7,8)
代码结构
【3d旋转图片制作HTML,js css3制作3D旋转图片切换代码】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)';
}
}

    推荐阅读


    上一篇：python|python excel画图_python读取excel数据并且画图

    下一篇：python|Python+OpenCV 轻松实现人脸识别签到考勤系统