css - CSS 动画 rotateZ 的 Opera 问题

Question

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

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

然后是@keyframes/@-o-keyframes

我不太擅长解释这个，所以我创建了一个 jsfiddle，这样你就可以更好地理解这个问题:

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

如您所见，黑色小方 block 在旋转。一个顺时针，一个逆时针。

但我无法让它在 Opera 中工作。我已经在 stacko 和其他来源上进行了搜索，但根据我在网上阅读的内容，Opera 应该能够很好地呈现它。

提前致谢!

Answer 1

这里是定义歌剧动画关键帧的方法

  @-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/