Rotate the main container element without affecting the content of its children

I'm trying to keep the text centered inside a spinning div by using absolute positioning on the children. I haven't found a solution yet, but I attempted to position it absolutely and disable the transition in the child element. I've included a jsfiddle link below that demonstrates the issue.

http://jsfiddle.net/4r9kattx/

Here is the HTML code:

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

And here is the CSS code:

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

Answer №1

I believe it would be better to avoid using a parent/child relationship and instead treat them as siblings within a container (I have retained the class names for illustrative purposes):

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

Check out the revised JSFiddle

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

the overflow issue with Summernote's dropdown menu

I am currently working on a 2 columns layout within 2 divs that have different margins set. In the left column, I have integrated a bootstrap datetimepicker and summernote. While the datetimepicker dialog overflows outside the internal div, I am wondering ...

Adjust the background color as you scroll

I am looking to create a functionality where the background-color of my header changes to match the background-color of the div it is currently scrolling past. For example, if the user scrolls to the #about section (which has a green background), I want th ...

Steps to inject HTML content via id using a technology such as AngularJS' ng-include

My current project involves using AngularJS to compile a directive into the main page. This directive contains a series of buttons that dynamically change based on its internal state. I am interested in relocating these buttons to a menu-bar within the pag ...

Dynamically load WordPress content using ajax and incorporate CSS3 animations for added visual appeal

It's time for a new challenge to push my learning curve. I've never ventured into the world of ajax before, but it seems like a skill I need to acquire. What better opportunity to learn than by implementing it on a fresh portfolio site. The main ...

Bootstrap's inline form features a button on a separate line from the rest of the form

I grabbed this code directly from bootstrap's official documentation: <form class="form-inline"> <div class="form-group"> <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label> <div class="inp ...

Despite utilizing the .img-fluid class, the image remains incompatible with the parent div and does not fit properly

So, I'm currently working on a test code where my aim is to fit an image into the parent div using Bootstrap 5. However, I'm facing a challenge where the image leaves a noticeable gap width-wise, despite using the .img-fluid class. You can see th ...

Symbol for infinity does not appear correctly within the span element

I am currently facing an issue where HTML entities are not displaying within a span element. Specifically, I am attempting to show &infin; if there is no destroy date for my object. Interestingly, when the entity is moved outside of the span, it appear ...

Adjust the checkmark color of MUI Checkbox

When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...

Removing a section of HTML from an EmailMessage Body in EWS

Is there a way to remove certain parts of the EWS EmailMessage .Body.Text value in C# before replying with a ResponseMessage? The elements that need to be removed include clickable and non-clickable buttons in HTML format. Since custom tags cannot be dec ...

Best placement for <img> tag in HTML for creating a background image using CSS (excluding CSS3)

I am currently working on a programming project called Broadway through Codeacademy. I have been given the task of adding a background image to the webpage. It seems like an easy task to accomplish. The simplest way to achieve this effect is by using the f ...

Tips for obtaining the sources of every image on a webpage and consolidating them in a single section

My goal is to preload all images on a webpage into a single division before the page loads. For example, if there are 5 images on the page (eg1.png, eg2.jpg, eg3.bmp, eg4.jpg, eg5.png), I want them to be contained within a div with the id 'pre'. ...

CSS can always surprise with its unexpected animations

Currently developing a static website with CSS animations: * { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease- ...

Tag editor assessing the input's width for SO

I've been working on a tag editor similar to Stack Overflow's and it's coming along nicely. The only issue I'm facing is calculating the width of the textbox after a tag has been selected by the user. For each tag added, I try to adjus ...

Height of the liquid division

I'm encountering an issue with my CSS layout. I have a container containing two columns, each styled with the following CSS: #project-desc{ float: left; width: 500px; } #project-images{ float: right; width: 300px; } I've use ...

Using Bootstrap 5 to beautifully wrap an even quantity of boxes

My challenge is to optimize the spacing between 4 boxes based on screen size: The layout should adjust as follows: If it's xxl or larger, all 4 boxes should be in a single horizontal row. If it's md or larger, two boxes should be in the firs ...

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

CSS selectors can be used to alter the styling of the container surrounding the text

My current content includes: <span> Hello </span> I am looking to apply CSS selectors to either replace or enclose the text inside the element with an <h1> Is it doable using only CSS selectors? ...

implement a Django for loop within the template by utilizing JavaScript

Is it possible to incorporate a {% for in %} loop and {{ variables }} in a Django template using JavaScript DOM (insertAdjacentText, or textContent) and dynamically load data from the views without refreshing the entire page? If so, can you please guide me ...

Prevent any sliding animations of content when the button is triggered

I've implemented a basic slideToggle functionality in jQuery. You can check out the code on JSFiddle here: $(document).ready(function() { $(".panel_button").on('click', function() { $(".panel").slideUp(); var targetPanel = $(thi ...

Tips for achieving printing with the "Fit sheet on one page" option in JavaScript

Is there a way to print a large table of data with 200 or 300 rows all on one page, similar to the Online MS Excel print option 'Fit Sheet on One Page'? I attempted the code below: var tble = document.createElement("table"); tble.id = "tble"; d ...