如何中心这个旋转图像（CSS动画） [英] How to center this rotating image (CSS animation)

问题描述

我的codePEN： HTTP：//$c$cpen.io / leongaban /笔/ wJAip

橙色装备是80×80，所以是白色的@标志。

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

下面是在Photoshop一字排开图片：

HTML

 ＆LT; D​​IV ID =微调＆GT;
    ＆LT; D​​IV ID =标志＆GT;
        ＆所述; IMG SRC =htt​​p://leongaban.com/_$c$​​cpen/whoat/loader-logo.png/＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV ID =齿轮级=旋转＆GT;
        ＆所述; IMG SRC =htt​​p://leongaban.com/_$c$​​cpen/whoat/loader-gear.png/＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

CSS：

  DIV＃{微调
  位置：绝对的;
  宽度：80px;
  高度：80px;
  顶部：35％;
  左：50％;
  保证金左：-40px;
  背景：蓝色;
}DIV＃标志{
    位置：绝对的;
    顶部：0;
    左：0;
    宽度：80px;
    高度：80px;
    的z-index：3;
}#logo IMG {
    宽度：100％;
    高度：100％;
}DIV＃{齿轮
    位置：绝对的;
    顶部：0;
    左：0;
    -webkit-过渡：-webkit-变换0.1秒;
    过渡：变换0.1S;
    -webkit-变换：translateX（100％）translateY（-100％），旋转（45deg）;
    变换：translateX（100％）translateY（-100％），旋转（45deg）;
    指针事件：无;
    的z-index：2;
}.spin {
    -webkit-动画：旋转4.5S线性无穷;
    动画：旋转4.5S线性无穷;
    -webkit-变换：translateX（100％）translateY（-100％），旋转（45deg）;
    变换：translateX（100％）translateY（-100％），旋转（45deg）;
}
 

解决方案

请在 #gear DIV块级图像。

#gear IMG {
    显示：块;
}


的http：//$c$cpen.io/anon/pen/rjfbl

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

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

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:

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

解决方案

Make the image in the #gear div block level.

#gear img{
    display:block;
}

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

这篇关于如何中心这个旋转图像（CSS动画）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！