Question

我试图使用关键帧制作一个简单的css旋转动画，并将transformZ从0改为36o度。

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

然后是@keyframes / @ -o-keyframes

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

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

如您所见，小黑方块正在旋转。一个是顺时针方向，另一个是逆时针方向。

但是我不能让它在Opera中工作..我搜索过stacko和其他来源但是从我在网上看到的内容，歌剧应该能够渲染这个很好......

提前致谢！

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/

歌剧问题与css动画rotateZ

1 个答案: