css旋转动画定义中心,如何中心这个旋转图像（CSS动画）(How to center this rotating imag...

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

橙色齿轮是80×80，所以是白色的@标志。

我添加了蓝色的背景，所以你可以看到，由于某种原因，橙色齿轮看起来是分拆中心。

下面是在Photoshop一字排开的图像：

HTML：

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);

}