使父级div旋转，但不包含子级的内容 [英] Make parent div spin, but without the children's content

问题描述

我想将孩子内部的文本绝对放置在旋转div中.这样文本就一直在中间.我没有遇到任何解决方案，但是我尝试通过绝对定位来定位它，并消除"了孩子的过渡.下面是附带问题的jsfiddle.

I want to keep the text inside of the children absolutely positioned in the spinning div. So that the text is in the middle all the time. I didn't come across a solution, but I tried positioning it with an absolute and "removing" the transition in the child. Below there's a jsfiddle attached with the problem.

http://jsfiddle.net/4r9kattx/

HTML:

<div class="parent">
    <div class="child">This is child</div>
</div>

CSS:

@-webkit-keyframes rotate {
  from{ -webkit-transform: rotate(0deg);   }
  to{   -webkit-transform: rotate(360deg); }
}
.parent {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #000;
    position: relative;
    top: 25%;
    border: 10px dashed red;
    -webkit-animation: rotate 12s linear infinite;
}

.child {
    position: absolute;
    color: #fff;
    -webkit-animation: none !important;
}

推荐答案

我认为您不应该使用父子关系.只是让它们成为容器中的兄弟姐妹(我保留类名只是为了显示区别):

I think that you shouldn't use parent/child relationship. Just let them be siblings inside a container (I kept the class names just for showing the difference):

<div class="container">
    <div class="parent"></div>
    <div class="child">This is child</div>
</div>

CSS

@-webkit-keyframes rotate {
  from{ -webkit-transform: rotate(0deg);   }
  to{   -webkit-transform: rotate(360deg); }
}
.parent {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #000;
    position: relative;
    top: 25%;
    border: 10px dashed red;
    -webkit-animation: rotate 12s linear infinite;
}

.container{
    position: relative;
}

.child {
    position: absolute;
    top: 50px;
    left: 20px;
    color: #fff;
    -webkit-animation: none !important;
}

这是更新的 JSFiddle

这篇关于使父级div旋转，但不包含子级的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！