1

我尝试使用关键帧和变换制作一个简单的 css 旋转动画：rotateZ 从 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 和其他来源上进行了搜索，但从我在网上阅读的内容来看，opera 应该能够很好地渲染它。

提前致谢！

4

1 回答 1

0

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

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

于 2013-08-24T18:10:16.573 回答