A CSS3-based 3D picture Flip switch effect

Today to share a CSS3-based 3D picture flip switch effect. Clicking the slider below the picture toggles the picture above. Move your mouse to try it, as follows:

Online preview Source Download

The implemented code.

HTML code:

 <DivID= "Imgdex">        < Figure>    <imgsrc= "Arabic-eyes.jpg"alt= "Photograph of a woman ' s face under a Bedouin headress"><figcaption>Bedouin</figcaption>  </ Figure>        < Figure>    <imgsrc= "Blue-green-eyes.jpg"alt= "Photograph of a man ' s Blue-green-eyes"><figcaption>Blue-green</figcaption>  </ Figure>        < Figure>    <imgsrc= "Fake-eyelashes.jpg"alt= "Photograph of dramatic fake eyelashes in closeup">    <figcaption>Dramatic Fake</figcaption>  </ Figure>        < Figure>    <imgsrc= "Snow-queen.jpg"alt= "Photograph of a girl in heavy snow"><figcaption>Snow</figcaption>  </ Figure>    </Div>    <form>    <inputtype= "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:

  varImgdex = document.getElementById (' Imgdex '), figs = imgdex.queryselectorall (' figure '), Imgcount =figs.length; Ranger.max=Imgcount; Ranger.value=Imgcount;  for(vari = 0; i < imgcount-1; i++) {            if(Window. Cp.shouldstopexecution (1)) {                 Break; }            varrotation = 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; functionupdateimage (slider) {varcurrentimg = Document.queryselector (' #imgdex figure:nth-child (' + slider.value + ') '); if(Slider.oldvalue!==undefined) {                varoldimg = Document.queryselector (' #imgdex figure:nth-child (' + slider.oldvalue + ') '); } Else{Slider.oldvalue=Imgcount; varoldimg = 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) {varrotation = 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; }        }

via:http://www.w2bc.com/article/18867

A CSS3-based 3D picture Flip switch effect