CSS动画与CSS / javascripts

Question

有人可以帮助解决下面的代码。我尝试按照此链接中的说明创建水平无限摄影轮。 http://www.the-art-of-web.com/css/infinite-photo-carousel/

这有几个问题：

1）当鼠标悬停在任何图像上时，图像会消失 2）一段时间后，它继续旋转，但是一半（或更多）可见图像不再可见 3）中心图片周围的边框随图片一起旋转，然后应该向后移动到中心但是依次在下一张图片上。看起来代码正在移动图片和边框。 4）试图在IE中查看的主要问题。我在Chrome中写了这个，我至少获得了3D成功。 IE显示前5个图像是平的，没有动画。我需要这个在IE，Chrome，Safari和Firefox中工作。

附加代码

＆＃13;

＆＃13;

 <style type="text/css">

  #stage3 {
    margin: 2em auto 1em 50%;
    height: 140px;
    -webkit-perspective: 1200px;
    -webkit-perspective-origin: 0 50%;
        -moz-perspective: 1200px;
    -moz-perspective-origin: 0 50%;
            -ms-perspective: 1200px;
    -ms-perspective-origin: 0 50%;
  }
    #rotator3 a {
    position: absolute;
    left: -81px;
    -moz-transform-style:preserve-3d;
  }
  #rotator3 a img {
    padding: 10px;
    border: 1px solid #ffff00;
    background: blue;
    -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
  }
    #rotator3 a:nth-of-type(1) img {
    -webkit-transform: rotateY(-90deg) translateZ(300px);
    -moz-transform: rotateY(-90deg) translateZ(300px);
    -ms-transform: rotateY(-90deg) translateZ(300px);
  }
  #rotator3 a:nth-of-type(2) img {
    -webkit-transform: rotateY(-60deg) translateZ(300px);
    -moz-transform: rotateY(-60deg) translateZ(300px);
    -ms-transform: rotateY(-60deg) translateZ(300px);
  }
  #rotator3 a:nth-of-type(3) img {
    -webkit-transform: rotateY(-30deg) translateZ(300px);
    -moz-transform: rotateY(-30deg) translateZ(300px);
    -ms-transform: rotateY(-30deg) translateZ(300px);
  }
  #rotator3 a:nth-of-type(4) img {
    -webkit-transform: translateZ(300px);
    -moz-transform: translateZ(300px);
    -ms-transform: translateZ(300px);
    background: #ffff00;
  }
  #rotator3 a:nth-of-type(5) img {
    -webkit-transform: rotateY(30deg) translateZ(300px);
    -moz-transform: rotateY(30deg) translateZ(300px);
    -ms-transform: rotateY(30deg) translateZ(300px);
  }
  #rotator3 a:nth-of-type(6) img {
    -webkit-transform: rotateY(60deg) translateZ(300px);
    -moz-transform: rotateY(60deg) translateZ(300px);
    -ms-transform: rotateY(60deg) translateZ(300px);
  }
  #rotator3 a:nth-of-type(n+7) img { display: none; }
  
    @-webkit-keyframes rotator3 {
    from { -webkit-transform: rotateY(0deg);}
    to   { -webkit-transform: rotateY(30deg);}
  }
    @-moz-keyframes rotator3 {
    from { -moz-transform: rotateY(0deg);}
    to   { -moz-transform: rotateY(30deg);}
  }
    @-ms-keyframes rotator3 {
    from { -ms-transform: rotateY(0deg);}
    to   { -ms-transform: rotateY(30deg);}
  }
    #rotator3 {
    -webkit-transform-origin: 0 0;
    -webkit-transform-style: preserve-3d;
    -webkit-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -webkit-animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-transform-origin: 0 0;
    -moz-transform-style: preserve-3d;
    -moz-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -moz-animation-duration: 1s;
    -moz-animation-delay: 1s;
    -ms-transform-origin: 0 0;
    -ms-transform-style: preserve-3d;
    -ms-animation-timing-function: cubic-bezier(1, 0.2, 0.2, 1);
    -ms-animation-duration: 1s;
    -ms-animation-delay: 1s;
  }
  

  </style>

<div id="stage3">
<div id="rotator3" style="-webkit-animation-name: rotator3;-moz-animation-name: rotator3;">
<a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
<a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
  <a href="http://i48.tinypic.com/2rp9x78.jpg"><img src="http://i48.tinypic.com/2rp9x78.jpg" width="140"></a>
<a href="http://i47.tinypic.com/30rpow7.jpg"><img src="http://i47.tinypic.com/30rpow7.jpg" width="140"></a>
</div>
</div>
  
<script type="text/javascript">

  // Original JavaScript code by Chirp Internet: www.chirp.com.au
  // Please acknowledge use of this code by including this header.

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

    var rotateComplete = 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);
    };

    var target = document.getElementById("rotator3");
    var arr = target.getElementsByTagName("a");

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

  }, false);

</script>

＆＃13;

＆＃13;

＆＃13;