BennyB
Reputation: 39
CSS rotate animation of HTML circle text, transform-origin doesn't work
I have a problem in applying CSS transform:rotate animation to a circle text obtained in HTML.
.rotText{
min-width: 80vw;
margin: 5vh auto;
text-align: center;
position: relative;
}
#test{
font-weight: 900;
color: #394add;
font-size: 20px;
display: inline-block;
margin-bottom: 128px;
position: relative;
z-index: 10;
border: 1px solid #f00;
transform: scale(1);
transform-origin: center center;
animation: rotation 5s linear infinite;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}<div class="rotText">
<img src="05-img/Thinking man.png" alt="">
<div class="curved-text" id="test">
<p style="height:165px; position:absolute; transform:rotate(0deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(8.78048780487805deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(17.5609756097561deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(26.34146341463415deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(35.1219512195122deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(43.90243902439025deg);
transform-origin:0 100%">g</p><p style="height:165px; position:absolute; transform:rotate(52.6829268292683deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(61.463414634146346deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(70.2439024390244deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(79.02439024390245deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(87.8048780487805deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(96.58536585365854deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(105.3658536585366deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(114.14634146341464deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(122.92682926829269deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(131.70731707317074deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(140.4878048780488deg);
transform-origin:0 100%">v</p><p style="height:165px; position:absolute; transform:rotate(149.26829268292684deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(158.0487804878049deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(166.82926829268294deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(175.609756097561deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(184.39024390243904deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(193.1707317073171deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(201.95121951219514deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(210.7317073170732deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(219.51219512195124deg);
transform-origin:0 100%">m</p><p style="height:165px; position:absolute; transform:rotate(228.2926829268293deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(237.07317073170734deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(245.85365853658539deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(254.63414634146343deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(263.4146341463415deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(272.19512195121956deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(280.9756097560976deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(289.7560975609756deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(298.5365853658536deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(307.31707317073165deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(316.09756097560967deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(324.8780487804877deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(333.6585365853657deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(342.43902439024373deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(351.21951219512175deg);
transform-origin:0 100%"></p>
</div>
</div>So, the rotation keyframe works correctly, but I really can't move the origin of the DIV (class 'curved-text'). Is there someone who's able to explain me where is the problem?
I supposed it could be due to the external DIV's origin, so I tried to change it with CSS command, but it didn't work.
Any idea?
Upvotes: 2
Views: 3545
Answers (1)
prettyInPink
Reputation: 3444
Giving height to the parent of your absolute positioned children, this what you are looking for?
.rotText{
min-width: 80vw;
margin: 5vh auto;
text-align: center;
position: relative;
}
#test{
font-weight: 900;
color: #394add;
font-size: 20px;
display: inline-block;
margin-bottom: 128px;
position: relative;
z-index: 10;
transform: scale(1);
transform-origin: center center;
animation: rotation 5s linear infinite;
height: calc(330px + 2rem);.
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}<div class="rotText">
<img src="05-img/Thinking man.png" alt="">
<div class="curved-text" id="test">
<p style="height:165px; position:absolute; transform:rotate(0deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(8.78048780487805deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(17.5609756097561deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(26.34146341463415deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(35.1219512195122deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(43.90243902439025deg);
transform-origin:0 100%">g</p><p style="height:165px; position:absolute; transform:rotate(52.6829268292683deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(61.463414634146346deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(70.2439024390244deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(79.02439024390245deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(87.8048780487805deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(96.58536585365854deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(105.3658536585366deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(114.14634146341464deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(122.92682926829269deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(131.70731707317074deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(140.4878048780488deg);
transform-origin:0 100%">v</p><p style="height:165px; position:absolute; transform:rotate(149.26829268292684deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(158.0487804878049deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(166.82926829268294deg);
transform-origin:0 100%">l</p><p style="height:165px; position:absolute; transform:rotate(175.609756097561deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(184.39024390243904deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(193.1707317073171deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(201.95121951219514deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(210.7317073170732deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(219.51219512195124deg);
transform-origin:0 100%">m</p><p style="height:165px; position:absolute; transform:rotate(228.2926829268293deg);
transform-origin:0 100%">a</p><p style="height:165px; position:absolute; transform:rotate(237.07317073170734deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(245.85365853658539deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(254.63414634146343deg);
transform-origin:0 100%">i</p><p style="height:165px; position:absolute; transform:rotate(263.4146341463415deg);
transform-origin:0 100%"> </p><p style="height:165px; position:absolute; transform:rotate(272.19512195121956deg);
transform-origin:0 100%">p</p><p style="height:165px; position:absolute; transform:rotate(280.9756097560976deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(289.7560975609756deg);
transform-origin:0 100%">o</p><p style="height:165px; position:absolute; transform:rotate(298.5365853658536deg);
transform-origin:0 100%">c</p><p style="height:165px; position:absolute; transform:rotate(307.31707317073165deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(316.09756097560967deg);
transform-origin:0 100%">d</p><p style="height:165px; position:absolute; transform:rotate(324.8780487804877deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(333.6585365853657deg);
transform-origin:0 100%">r</p><p style="height:165px; position:absolute; transform:rotate(342.43902439024373deg);
transform-origin:0 100%">e</p><p style="height:165px; position:absolute; transform:rotate(351.21951219512175deg);
transform-origin:0 100%"></p>
</div>
</div>Upvotes: 3
Related Questions
- Rotate objects around circle using CSS?
- Circle text animation bugfixing
- CSS transform rotate animation not working as a spinning wheel
- CSS3 - Circle rotating skewed/incorrectly
- svg rotate-animation (transform-origin)
- Circle animation not centered on center
- transform origin css shifting while rotating in circular way
- CSS transform and rotate with animation
- css circle rotation with text inside
- animating text to rotate around a circle