基于JS的3D切换特效。直接上代码;
一个父容器,里面包裹一个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部分:
<script> var btnleft = document.querySelector(".arrow-left"); var btnright = document.querySelector(".arrow-right"); var ul = document.querySelector("ul"); var index = 0; btnleft.addEventListener("click",function () { index++; ul.style.transform = "rotateX("+(index * 90)+"deg)"; }) btnright.addEventListener("click",function () { index--; ul.style.transform = "rotateX("+(index * 90)+"deg)"; }) </script>
里面主要就是操作点击事件和动态控制照片旋转效果。
最后,大家可以新建一个html文件,把上面3个部分直接拷贝,可以直接在浏览器运行。
网友评论文明上网理性发言 已有0人参与
发表评论: