无法围绕中心css旋转图像

Question

所以我想用css旋转一个图标。

我试过这个

.rotate-icon-gif {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { 
        -ms-transform: rotate(0deg); 
    }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg);
            -webkit-transform-origin: 30px 22px;

     }
    to { -webkit-transform: rotate(360deg); 
            -webkit-transform-origin: 30px 22px;

    }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
        transform-origin: 55% 50%;
    }
    to {
        transform:rotate(360deg);
        transform-origin: 55% 50%;
    }
}

但它不会旋转到位 - 它围绕其他中心旋转。

我已经看过具有此功能的div的维度 -

它是60 x 30，顶部有15个填充。因此，我试图在30px和22px偏移上进行变换原点。

它还没有工作 - 我该如何解决这个问题？

Answer 1

实现这一目标有两种方法。首先，您可以编辑图像，使中心直接位于旋转轴上。

第一种方法

使用裁剪图像。 （没有添加CSS，删除过时的transition-origin）

请参阅代码段

＆＃13;

＆＃13;

.rotate-icon-gif {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@-ms-keyframes spin {
    from { 
        -ms-transform: rotate(0deg); 
    }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg);

     }
    to { -webkit-transform: rotate(360deg); 

    }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

＆＃13;

<img src="http://i.imgur.com/tPLLoew.png" class="rotate-icon-gif">

＆＃13;

＆＃13;

＆＃13;

第二种方法

您可以使用transform-origin: x y;在这里，您需要使用画图或 Photoshop 来找到轴的x和y坐标:(您需要找到黑线交点的坐标

请参阅代码段

＆＃13;

＆＃13;

.rotate-icon-gif {
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
    transform-origin: 42px 35px;
  }
  to {
    -ms-transform: rotate(360deg);
    transform-origin: 42px 35px;
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
    -moz-transform-origin: 42px 35px;
  }
  to {
    -moz-transform: rotate(360deg);
    -moz-transform-origin: 42px 35px;
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -webkit-transform-origin: 42px 35px;
  }
  to {
    -webkit-transform: rotate(360deg);
    -webkit-transform-origin: 42px 35px;
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
    transform-origin: 42px 35px;
  }
  to {
    transform: rotate(360deg);
    transform-origin: 42px 35px;
  }
}

＆＃13;

<img src="http://i.stack.imgur.com/GZ2CV.png" class="rotate-icon-gif">

＆＃13;

＆＃13;

＆＃13;

注意 - 来自我的其他答案：link