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

Posted 2023-05-08

【中文标题】如何在不同方向旋转两个不同的图像？

【英文标题】：How can I spin two different images in different directions?

【发布时间】：2014-06-12 06:01:14

【问题描述】：

我试图在不同方向上不断旋转两个齿轮图像 - 一个顺时针，另一个逆时针。我在下面找到了 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);

【参考方案1】：

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

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