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)';
}
}
推荐阅读
- 投稿|知乎寻找“第二春”
- 投稿|百度变道
- 投稿|情景喜剧，相见不如怀念？
- 投稿|快手有远忧
- 如何在特色图片后显示一些html（）
- 如何在悬停CSS上显示博客特色图片（）
- 投稿|快手活在夹缝中
- 技术交流|Python图像处理丨图像缩放、旋转、翻转与图像平移
- 投稿|TME寻找“视频号红利”
- 搭建FastDFS分布式集群通过Nginx+Lua+GraphicsMagick实现动态压缩图片