Js achieves 3D switching and js3d Switching

Js achieves 3D switching and js3d Switching

Today, I will share a 3d flip animation. js + css3 + h5 implementation has no frame.

Let's take a look at the html section:

1 <div class = "box"> 2 <ul> 3 <li> </li> 4 <li> </li> 5 <li> </li> 6 <li> </li> 7 </ul> 8 <span class = "arrow-left"> previous page </span> 9 <span class = "arrow-right"> next page </ span> 10 </div>

View Code

A parent container contains a ul, and then uses li to store 5 pictures you like.

The following is part 3 of css3:

<style>        *{            margin: 0;            padding: 0;            list-style: none;        }        .box{            width: 300px;            height: 300px;            margin: 100px auto;            position: relative;        }        ul{            width: 100%;            height: 100%;            box-sizing: border-box;            position: relative;            transform-style: preserve-3d;            transition: all 1s;        }        ul li{            width: 100%;            height: 100%;            position: absolute;            top: 0;            left: 0;            background-size: 100% 100%;        }        li:nth-child(1){            background-image: url("3.jpg");            transform: translateZ(150px);        }        li:nth-child(2){            background-image: url("4.jpg");            transform: rotateX(90deg) translateZ(150px);        }        li:nth-child(3){            background-image: url("5.jpg");            transform: rotateX(180deg) translateZ(150px);        }        li:nth-child(4){            background-image: url("6.jpg");            transform: rotateX(270deg) translateZ(150px);        }        .arrow-left,.arrow-right{            width: 50px;            height: 50px;            background-color: #ff254a;            border-radius: 5px;            text-align: center;            cursor: pointer;        }        .arrow-left{            position: absolute;            top: 50%;            transform: translateY(-50%);            left: -50px;            line-height: 50px;        }        .arrow-right{            position: absolute;            top: 50%;            transform: translateY(-50%);            right: -50px;            line-height: 50px;        }    </style>

It mainly uses the transform3d rotation of css3 and the excessive animation of transition. "Transform-style: preserve-3d;" this sentence must be written in the parent container of the animation, otherwise the 3d effect can not be seen.

Below is the js part:

 1 <script> 2     var btnleft = document.querySelector(".arrow-left"); 3     var btnright = document.querySelector(".arrow-right"); 4     var ul = document.querySelector("ul"); 5  6     var index = 0; 7     btnleft.addEventListener("click",function () { 8         index++; 9         ul.style.transform = "rotateX("+(index * 90)+"deg)";10     })11     btnright.addEventListener("click",function () {12         index--;13         ul.style.transform = "rotateX("+(index * 90)+"deg)";14     })15 </script>

View Code

It mainly involves clicking events and dynamically controlling the image rotation effect.

Finally, you can create an html file, copy the preceding three parts directly, and run the file directly in the browser.