1

私の CodePen: http://codepen.io/leongaban/pen/wJAip

オレンジ色の歯車は 80x80 で、白い @ ロゴも同様です。

ここに画像の説明を入力

青色の背景を追加したので、何らかの理由でオレンジ色の歯車が中心からずれて回転しているように見えます.

フォトショップで並べた画像は次のとおりです。

ここに画像の説明を入力

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

2 に答える 2

3

#geardiv ブロックレベルで画像を作成します。

#gear img{
    display:block;
}

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

于 2013-09-24T23:11:42.617 に答える
1

なんらかの理由で、ギア要素の高さが 84px になっています。これにより、軸が外れて回転します。実験として、高さを#gear非常に小さい値 (0px など) に設定して観察してみてください。境界ボックスの上部にある点を中心に回転しているように見えます。

ギアの幅と高さを明示的に 80x または 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 (幅と高さの 2 行を追加したもの): http://codepen.io/anon/pen/LuBvI

于 2013-09-24T23:05:04.243 に答える