如何使这个旋转图像居中（CSS 动画）答案

【问题标题】：How to center this rotating image (CSS animation)如何使这个旋转图像居中（CSS 动画）
【发布时间】：2013-09-25 07:14:47
【问题描述】：

我的 CodePen：http://codepen.io/leongaban/pen/wJAip

橙色齿轮是 80x80，白色 @ 标志也是。

我添加了蓝色背景，因此您可以看到由于某种原因橙色齿轮看起来像是从中心旋转。

这是在 Photoshop 中排列的图像：

html:

<div id="spinner">
    <div id="logo">
        <img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/>
    </div>
    <div id="gear" class="spin">
        <img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/>
    </div>
</div>

CSS：

div#spinner {
  position: absolute;
  width: 80px;
  height: 80px;
  top: 35%;
  left: 50%;
  margin-left: -40px;
  background: blue;
}

div#logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;    
    height: 80px;
    z-index: 3;
}

#logo img {
    width: 100%;
    height:100%;
}

div#gear {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: -webkit-transform 0.1s;
    transition: transform 0.1s;
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
    transform: translateX(100%) translateY(-100%) rotate(45deg);
    pointer-events: none;
    z-index: 2;
}

.spin {
    -webkit-animation: rotation 4.5s linear infinite;
    animation: rotation 4.5s linear infinite;
    -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
    transform: translateX(100%) translateY(-100%) rotate(45deg);
}

【问题讨论】：

标签： css animation

【解决方案1】：

在#gear div 块级别制作图像。

#gear img{
    display:block;
}

http://codepen.io/anon/pen/rjfbl

【讨论】：

【解决方案2】：

无论出于何种原因，您的齿轮元素的高度都达到了 84 像素。这将导致它离轴旋转。作为一个实验，您可能希望尝试将高度和#gear 设置为非常小的东西（例如 0px）并观察它；就好像它围绕边界框顶部的一个点旋转。

将你的装备的宽度和高度明确设置为 80 倍或 100%，它会起作用。

div#gear {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.1s;
  transition: transform 0.1s;
  pointer-events: none;
  z-index: 2;
}

Codepen（你的，加上两条线，宽度和高度）：http://codepen.io/anon/pen/LuBvI

【讨论】：