三面立体旋转的轮播图

 

　　通过一些小的改动，我们可以使用不同的多边形形状用于图像轮，以及更大的图像，从而产生不同的效果。在这种情况下，图像是两倍大并且放置在使用较少空间的三角形布置中。序列中仍然有八张相同的照片：

 

　　2.gif

 

　　使用Firefox，你会看到动画也在运行。除了额外的JavaScript代码，并用-moz替换-webkit，我们必须添加-moz-transform-style：preserve-3d;到css的#rotatora里，因为它没有被继承（从Firefoxv12开始）。

 

　　这个例子略有变化，我们正在将照片从队列的前面移动到后面。在前一种情况下，我们将它们从队列的后面移动到前面。

 

　　为此，我们将把：

 

　　target.insertBefore(arr[arr.length-1],arr[0]);

 

　　变成：

 

　　target.appendChild(arr[0]);

 

　　下面放上完整代码：

 

　　html代码：

 

　　<divid="stage3">

 

　　<divid="rotator3"style="-webkit-animation-name:rotator3;-moz-animation-name:rotator3;">

 

　　<ahref="1.jpg"><imgsrc="1.jpg"height="180"></a>

 

　　<ahref="2.jpg"><imgsrc="2.jpg"height="180"></a>

 

　　<ahref="3.jpg"><imgsrc="3.jpg"height="180"></a>

 

　　<ahref="4.jpg"><imgsrc="4.jpg"height="180"></a>

 

　　<ahref="5.jpg"><imgsrc="5.jpg"height="180"></a>

 

　　<ahref="6.jpg"><imgsrc="6.jpg"height="180"></a>

 

　　<ahref="7.jpg"><imgsrc="7.jpg"height="180"></a>

 

　　<ahref="8.jpg"><imgsrc="8.jpg"height="180"></a>

 

　　</div>

 

　　</div>

 

　　css代码：

 

　　

 

　　

 

　　

 

　　

 

　　#stage3{

 

　　margin:2emauto1em50%;

 

　　height:240px;

 

　　-webkit-perspective:1200px;

 

　　-webkit-perspective-origin:090px;

 

　　-moz-perspective:1200px;

 

　　-moz-perspective-origin:090px;

 

　　-ms-perspective:1200px;

 

　　-ms-perspective-origin:090px;

 

　　}

 

　　#rotator3a{

 

　　position:absolute;

 

　　left:-151px;

 

　　-moz-transform-style:preserve-3d;

 

　　}

 

　　#rotator3aimg{

 

　　padding:10px;

 

　　border:1pxsolid#ccc;

 

　　background:#fff;

 

　　-webkit-backface-visibility:hidden;

 

　　-moz-backface-visibility:hidden;

 

　　-ms-backface-visibility:hidden;

 

　　}

 

　　#rotator3a:nth-of-type(1)img{

 

　　-webkit-transform:rotateX(-90deg)translateZ(100px);

 

　　-moz-transform:rotateX(-90deg)translateZ(100px);

 

　　-ms-transform:rotateX(-90deg)translateZ(100px);

 

　　}

 

　　#rotator3a:nth-of-type(2)img{

 

　　-webkit-transform:translateZ(100px);

 

　　-moz-transform:translateZ(100px);

 

　　-ms-transform:translateZ(100px);

 

　　}

 

　　#rotator3a:nth-of-type(3)img{

 

　　-webkit-transform:rotateX(90deg)translateZ(100px);

 

　　-moz-transform:rotateX(90deg)translateZ(100px);

 

　　-ms-transform:rotateX(90deg)translateZ(100px);

 

　　}

 

　　#rotator3a:nth-of-type(n+4){display:none;}

 

　　@-webkit-keyframesrotator3{

 

　　from{-webkit-transform:rotateX(0deg);}

 

　　to{-webkit-transform:rotateX(90deg);}

 

　　}

 

　　@-moz-keyframesrotator3{

 

　　from{-moz-transform:rotateX(0deg);}

 

　　to{-moz-transform:rotateX(90deg);}

 

　　}

 

　　@-ms-keyframesrotator3{

 

　　from{-ms-transform:rotateX(0deg);}

 

　　to{-ms-transform:rotateX(90deg);}

 

　　}

 

　　#rotator3{

 

　　-webkit-transform-origin:0101px;

 

　　-webkit-transform-style:preserve-3d;

 

　　-webkit-animation-timing-function:cubic-bezier(1,0.2,0.2,1);

 

　　-webkit-animation-duration:2s;

 

　　-webkit-animation-delay:1s;

 

　　-moz-transform-origin:0101px;

 

　　-moz-transform-style:preserve-3d;

 

　　-moz-animation-timing-function:cubic-bezier(1,0.2,0.2,1);

 

　　-moz-animation-duration:2s;

 

　　-moz-animation-delay:1s;

 

　　-ms-transform-origin:0101px;

 

　　-ms-transform-style:preserve-3d;

 

　　-ms-animation-timing-function:cubic-bezier(1,0.2,0.2,1);

 

　　-ms-animation-duration:2s;

 

　　-ms-animation-delay:1s;

 

　　}

 

　　#rotator3:hover{

 

　　-webkit-animation-play-state:paused;

 

　　-moz-animation-play-state:paused;

 

　　-ms-animation-play-state:paused;

 

　　}

 

　　js代码：

 

　　

 

　　document.addEventListener("DOMContentLoaded",function(){

 

　　varrotateComplete=function(e){

 

　　with(target.style){

 

　　webkitAnimationName=MozAnimationName=msAnimationName="";

 

　　}

 

　　target.insertBefore(arr[arr.length-1],arr[0]);

 

　　setTimeout(function(el){

 

　　with(el.style){

 

　　webkitAnimationName=MozAnimationName=msAnimationName="rotator3";

 

　　}

 

　　},0,target);

 

　　};

 

　　vartarget=document.getElementById("rotator3");

 

　　vararr=target.getElementsByTagName("a");

 

　　target.addEventListener("webkitAnimationEnd",rotateComplete,false);

 

　　target.addEventListener("animationend",rotateComplete,false);

 

　　target.addEventListener("MSAnimationEnd",rotateComplete,false);

 

　　},false);





本文转载自中文网