动态图片展示"/>
3D动态图片展示
为方便阅读，js与css都采用内联。
目录
实现效果（裸图）：
实现效果（上图后）：
项目目录：
代码：
实现效果（裸图）：
实现效果（上图后）：
项目目录：
代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style type="text/css">*{margin: 0;padding: 0;}ul{cursor: pointer;list-style: none;margin: 40vh 40vw;}.list li{width: 200px;height: 200px;position: relative;text-align:center;line-height: 200px;transition: all 1s;transform-style: preserve-3d;transform:perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}div{width: 200px;height: 200px;}.l1 div{position: absolute;top: 0px;left: 0px;}.l1 div:first-child{background: red;background: url(img/a.jpg)no-repeat;background-size:200px 200px;transform:translateZ(100px);}.l1 div:nth-child(2){background: aqua;background: url(img/b.jpg)no-repeat;background-size:200px 200px;transform: rotateX(90deg) translateZ(100px);}.l1 div:nth-child(3){background: yellow;background: url(img/c.jpg)no-repeat;background-size:200px 200px;transform: rotateY(90deg) translateZ(100px);}.l1 div:nth-child(4){background: greenyellow;background: url(img/d.jpg)no-repeat;background-size:200px 200px;transform:rotateY(-90deg) translateZ(100px);}.l1 div:nth-child(5){background: peru;background: url(img/e.jpg)no-repeat;background-size:200px 200px;transform: rotateX(-90deg) translateZ(100px);}.l1 div:nth-child(6){background:pink;background: url(img/f.jpg)no-repeat;background-size:200px 200px;transform:translateZ(-100px);}.l2{margin-top: -200px;}.l2 div{position: absolute;top: 0px;left: 0px;}.l2 div:first-child{background: red;background: url(img/a.jpg)no-repeat;background-size:200px 200px;transform:translateZ(100px);}.l2 div:nth-child(2){background: aqua;background: url(img/b.jpg)no-repeat;background-size:200px 200px;transform: rotateX(90deg) translateZ(100px);}.l2 div:nth-child(3){background: yellow;background: url(img/c.jpg)no-repeat;background-size:200px 200px;transform: rotateY(90deg) translateZ(100px);}.l2 div:nth-child(4){background: greenyellow;background: url(img/d.jpg)no-repeat;background-size:200px 200px;transform:rotateY(-90deg) translateZ(100px);}.l2 div:nth-child(5){background: peru;background: url(img/e.jpg)no-repeat;background-size:200px 200px;transform: rotateX(-90deg) translateZ(100px);}.l2 div:nth-child(6){background:pink;background: url(img/f.jpg)no-repeat;background-size:200px 200px;transform:translateZ(-100px);}</style><script type="text/javascript">window.onload=function(){var l1=document.querySelector(".l1");var l2=document.querySelector(".l2");var div=l2.querySelectorAll("div");var sb=0;var nt=360;var time=setInterval(function(){sb++;l1.style.transform="perspective(1000px) rotateX("+nt+"deg) rotateY("+sb+"deg) rotateZ("+sb+"deg)";l2.style.transform="perspective(1000px) rotateX("+nt+"deg) rotateY("+sb+"deg) rotateZ("+sb+"deg)";},10)l2.onmouseenter=function(){div[0].style.transform="translateZ(300px)";div[1].style.transform="rotateX(90deg) translateZ(300px)";div[2].style.transform="rotateY(90deg) translateZ(300px)";div[3].style.transform="rotateY(-90deg)translateZ(300px)";div[4].style.transform="rotateX(-90deg) translateZ(300px)";div[5].style.transform="translateZ(-300px)";}l2.onmouseleave=function(){div[0].style.transform="translateZ(100px)";div[1].style.transform="rotateX(90deg) translateZ(100px)";div[2].style.transform="rotateY(90deg) translateZ(100px)";div[3].style.transform="rotateY(-90deg)translateZ(100px)";div[4].style.transform="rotateX(-90deg) translateZ(100px)";div[5].style.transform="translateZ(-100px)";}}</script><body><ul class="list"><li class="l1"><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div></li><li class="l2"><div>a</div><div>b</div><div>c</div><div>d</div><div>e</div><div>f</div></li></ul></body>
</html>
更多推荐
3D动态图片展示
发布评论