Question

我试图无休止地旋转两个不同方向的齿轮图像 - 一个顺时针，另一个逆时针。我在下面找到了css3，但它只是向同一方向动画它们。完成此任务的最佳方法是什么？是通过css3还是查询？（考虑跨浏览器兼容性）

  #image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
 #image2 {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 120px;
        height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    }


 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
    @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg);

Answer 1

需要另一个，比如名为antispin，设置为-360deg（减号）：

 @-moz-keyframes antispin { 100% { -moz-transform: rotate(-360deg); } }

如何在不同方向旋转两个不同的图像？

1 个答案: