A 3D image page switching special effect based on css3_html/css_WEB-ITnose

Today I will share with you a 3D image page switching effect based on css3. Clicking the slider below the image will switch the image above. Move your mouse and give it a try. The rendering is as follows:

Online preview Source code download

The implemented code.

html code:

 <div id="imgdex">        <figure>    <img src="arabic-eyes.jpg" alt="Photograph of a woman's face under a Bedouin headress"><figcaption>Bedouin</figcaption>  </figure>        <figure>    <img src="blue-green-eyes.jpg" alt="Photograph of a man's blue-green-eyes"><figcaption>Blue-green</figcaption>  </figure>        <figure>    <img src="fake-eyelashes.jpg" alt="Photograph of dramatic fake eyelashes in closeup">    <figcaption>Dramatic Fake</figcaption>  </figure>        <figure>    <img src="snow-queen.jpg" alt="Photograph of a girl in heavy snow"><figcaption>Snow</figcaption>  </figure>    </div>    <form>    <input type="range" min="1" onfocus="this.oldvalue = this.value;" oninput="updateImage(this);this.oldvalue = this.value;"        id="ranger">    </form>

css3 code:

  #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 code:

  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) {                currentimg.style.webkitTransform = 'rotateX(' + slider.value + 'deg)';                currentimg.style.transform = 'rotateX(' + slider.value + 'deg)';            }            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;            }        }