CODEWITHSUNDEEP
cssanimation
Leon Gaban
Leon Gaban

Reputation: 39018

How to center this rotating image (CSS animation)

My CodePen: http://codepen.io/leongaban/pen/wJAip

The orange gear is 80x80 and so is the white @ logo.

enter image description here

I added the blue background so you can see that for some reason the orange gear looks like it is spinning off center.

Here is the image lined up in photoshop:

enter image description here

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

Upvotes: 1

Views: 5478

Answers (2)

DRobinson
DRobinson

Reputation: 4471

For whatever reason your gear element is getting a height of 84px. This will cause it to spin off-axis. As an experiment you might wish to try setting height and on #gear to something very small (e.g. 0px) and watching it; it will be as though it's rotating around a point at the top of its bounding box.

Set the width and height of your gear explicitly to 80x, or 100%, and it will work.

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 (yours with the two added lines, width and height): http://codepen.io/anon/pen/LuBvI

Upvotes: 1

Musa
Musa

Reputation: 97672

Make the image in the #gear div block level.

#gear img{
    display:block;
}

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

Upvotes: 3

Related Questions