如何居中这个旋转图像(CSS动画) [英] How to center this rotating image (CSS animation)
本文介绍了如何居中这个旋转图像(CSS动画)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我的代码页:
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屋!
查看全文