css动画rotateZ的Opera问题

Question

我尝试使用关键帧和变换制作一个简单的css旋转动画：从0到36o度的rotateZ。

-o-animation: rotate-r 8s infinite linear;
animation: rotate-r 8s infinite linear;

然后@keyframes/@-o-keyframes

我很难解释这一点，所以我创建了一个jsfiddle，这样你就可以更好地理解这个问题：

http://jsfiddle.net/bxTdd/7/

正如你所看到的，黑色的小方块正在旋转。一个是顺时针，另一个是逆时针。

但是我不能让它在歌剧院工作。。我在stacko和其他来源上搜索过，但从我在网上读到的内容来看，歌剧应该能够很好地呈现这一点。。

提前感谢！

Answer 1

以下是如何定义opera动画关键帧

  @-o-keyframes rotate-l {
          0%   { -o-transform: rotateZ(0deg);}
          100% { -o-transform: rotateZ(360deg); }
        }

最佳实践和性能

.big, .small{
              -webkit-backface-visibility:hidden; /* Chrome and Safari */
              -moz-backface-visibility:hidden; /* Firefox */
              -ms-backface-visibility:hidden; /* Internet Explorer */
              -o-backface-visibility:hidden; /* opera */
              backface-visibility:hidden;
     }

演示：http://jsfiddle.net/kougiland/bxTdd/13/

最后的代码应该是这样的：

html

<div class=hereComes3d>
   <span class="big"></span>
   <span class="small"></span>
</div>

css：

.hereComes3d{
    -webkit-transform-style: preserve-3d; 
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d; 
        -o-transform-style: preserve-3d;
        transform-style: preserve-3d; 
            -webkit-perspective: 300px;  
     -moz-perspective: 300px;  
      -ms-perspective: 300px; 
       -o-perspective: 300px; 
          perspective: 300px;
}
.small,.big{
    -webkit-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
    -webkit-backface-visibility:hidden; /* Chrome and Safari */
     -moz-backface-visibility:hidden; /* Firefox */
     -ms-backface-visibility:hidden; /* Internet Explorer */
     -o-backface-visibility:hidden; /* opera */
     backface-visibility:hidden;
}
.big{
    position: fixed;
    background: #000;
    width: 15px;
    height: 15px;
    top: 18px;
    left: 8px;
    -webkit-animation: rotation 8s infinite linear;
    -moz-animation: rotation 8s infinite linear;
    -ms-animation: rotation 8s infinite linear;
    -o-animation: rotation 8s infinite linear;
    animation: rotation 8s infinite linear;
}
.small{
    position: fixed;
    background: #000;
    width: 10px;
    height: 10px;
    top: 10px;
    left: 30px;
    -webkit-animation: rotation2 8s infinite linear;
    -moz-animation: rotation2 8s infinite linear;
    -ms-animation: rotation2 8s infinite linear;
    -o-animation: rotation2 8s infinite linear;
    animation: rotation2 8s infinite linear;
}

  @-webkit-keyframes rotation {
      from   { -webkit-transform: rotateZ(0deg);}
      to { -webkit-transform: rotateZ(359deg); }
    }
    @-moz-keyframes rotation {
      from   { -moz-transform: rotateZ(0deg);}
      to { -moz-transform: rotateZ(359deg); }
    }
    @-ms-keyframes rotation {
      from   { -ms-transform: rotateZ(0deg);}
      to { -ms-transform: rotateZ(359deg); }
    }
    @-o-keyframes rotation {
      from   { -o-transform: rotateZ(0deg);}
      to { -o-transform: rotateZ(359deg); }
    }
    @keyframes rotation {
      from   { transform: rotateZ(0deg);}
      to { transform: rotateZ(359deg); }
    }
    @-webkit-keyframes rotation2 {
      0%   { -webkit-transform: rotateZ(359deg);}
      100% { -webkit-transform: rotateZ(0deg); }
    }
    @-moz-keyframes rotation2 {
      0%   { -moz-transform: rotateZ(359deg);}
      100% { -moz-transform: rotateZ(0deg); }
    }
    @-ms-keyframes rotation2 {
      0%   { -ms-transform: rotateZ(359deg);}
      100% { -ms-transform: rotateZ(0deg); }
    }
    @-o-keyframes rotation2 {
      0%   { -o-transform: rotateZ(359deg);}
      100% { -o-transform: rotateZ(0deg); }
    }
    @keyframes rotation2 {
      0%   { transform: rotateZ(359deg);}
      100% { transform: rotateZ(0deg); }
    }

在此处阅读更多信息http://dev.opera.com/articles/view/understanding-3d-transforms/