今天给大家分享一款基于css3的3d图片翻页切换特效。单击图片下方的滑块会切换上方的图片。动起你的鼠标试试吧，效果图如下：
在线预览   源码下载
实现的代码。
html代码：
bedouin blue-green dramatic fake snow

css3代码：
#imgdex { position: relative; -webkit-perspective: 4000px; perspective: 4000px; width: 80%; max-width: 1200px; margin: 0 auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; font-family: avenir, calibri, sans-serif; padding-top: 45%; } #imgdex figure, #imgdex figure figcaption { position: absolute; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } #imgdex figure { top: 0; left: 120px; -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; width: 70%; } #imgdex figure img { width: 100%; } #imgdex figure figcaption { bottom: 0; font-size: 1.2rem; left: -8rem; opacity: 0; } #imgdex figure:last-of-type { -webkit-transform: rotatex(5deg); transform: rotatex(5deg); box-shadow: 0px 0px 200px rgba(0,0,0,0.5); } form { text-align: center; padding-bottom: 2rem; } form input[type=range] { width: 50%; }
js代码：
var imgdex = document.getelementbyid('imgdex'), figs = imgdex.queryselectorall('figure'), imgcount = figs.length; ranger.max = imgcount; ranger.value = imgcount; for (var i = 0; i < imgcount - 1; i++) { if (window.cp.shouldstopexecution(1)) { break; } var rotation = parsefloat(-92 + '.' + (imgcount - i)); figs[i].style.webkittransform = 'rotatex(' + rotation + 'deg)'; figs[i].style.transform = 'rotatex(' + rotation + 'deg)'; } window.cp.exitedloop(1); document.queryselector('#imgdex figure:last-child figcaption').style.opacity = 1; function updateimage(slider) { var currentimg = document.queryselector('#imgdex figure:nth-child(' + slider.value + ')'); if (slider.oldvalue !== undefined) { var oldimg = document.queryselector('#imgdex figure:nth-child(' + slider.oldvalue + ')'); } else { slider.oldvalue = imgcount; var oldimg = document.queryselector('#imgdex figure:nth-child(' + slider.oldvalue + ')'); } if (slider.value slider.oldvalue) { var rotation = parsefloat(-92 + '.' + (imgcount - slider.value)); oldimg.style.webkittransform = 'rotatex(' + rotation + 'deg)'; oldimg.style.transform = 'rotatex(' + rotation + 'deg)'; } if (slider.value !== slider.oldvalue) { currentimg.queryselector('figcaption').style.opacity = 1; oldimg.queryselector('figcaption').style.opacity = 0; } }