js实现3D切换效果

2018-02-03 19:51:52来源:cnblogs.com作者:凌晨4点的阳光人点击

分享

今天分享一个3d翻转动画效果,js+css3+h5实现,没有框架。

先看下html部分:

 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">上一页</span> 9     <span class="arrow-right">下一页</span>10 </div>

一个父容器,里面包裹一个ul,然后用li存放5张自己喜欢的图片

下面是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>

里面主要用到css3的 transform3d旋转 和 transition的过度动画。“transform-style: preserve-3d;”这句话一定要写在动画的父容器里面,否则3d效果看不出来。

下面贴出js部分:

 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>

里面主要就是操作点击事件和动态控制照片旋转效果。

最后,大家可以新建一个html文件,把上面3个部分直接拷贝,可以直接在浏览器运行。

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台