Step-by-step guide to forming a rotating half-circle encompassing text

I have a unique shape in the center of my webpage that I want to rotate 360 degrees. Currently, I can adjust the width to make part of it spin, but I'm looking for a way to achieve a full rotation. Ideally, I would like to accomplish this using only CSS, but I am open to vanilla JavaScript if necessary (no jQuery).

body {
  background-color: lightblue;
}

#txt {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  top: 40%;
  font-size: 30px;
  color: white;
}

#spinCircle {
  position: fixed;
  left: 50%;
  top: 15%;
  height: 50vh;
  width: 50px;
  border-radius: 0 150px 150px 0;
  border-color: black;
  color: black;
  border-style: solid;
  border-left-style: none;
  /*background-color: black;*/
  animation: spinning infinite;
  animation-duration: 3s;
}

@keyframes spinning {
  from {
    width: 50px
  }
  to {
    width: 0px;
    z-index: -5;
  }
}
<div id="txt">Hello</div>
<div id="spinCircle" />

javascripthtmlcss

Answer №1

Are you looking for this specific design?

body {
  background-color: lightblue;
}

#txt {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  top: 40%;
  font-size: 30px;
  color: white;
}

#spinCircle {
  position: fixed;
  left: 50%;
  top: 15%;
  height: 50vh;
  width: 50px;
  border-radius: 0 150px 150px 0;
  border-color: black;
  color: black;
  border-style: solid;
  border-left-style: none;
  transform-origin: left;
  /*background-color: black;*/
  animation: spinning infinite;
  animation-duration: 3s;
}

@keyframes spinning {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(180deg);
    z-index: -5;
  }
}
<div id="txt">Hello</div>
<div id="spinCircle" />

Answer №2

It seems like you're looking to have the semicircle rotate around the text "hello". To achieve this effect, you can utilize the CSS property transform: rotateY() to make the circle spin. Make sure to specify the width of the circle div and set the transform-origin to be the left side for rotation around that point:

transform-origin: left;
width: 50px;

Check out the example below: 

body {
  background-color: lightblue;
}

#txt {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  top: 40%;
  font-size: 30px;
  color: white;
}

#spinCircle {
  position: fixed;
  left: 50%;
  top: 15%;
  height: 50vh;
  width: 200px;
  border-radius: 0 150px 150px 0;
  border-color: black;
  color: black;
  border-style: solid;
  border-left-style: none;
  animation: spinning linear infinite;
  animation-duration: 3s;
  transform-origin: left;
  width: 50px;
}

@keyframes spinning {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(360deg);
  }
}
<div id="txt">Hello</div>
<div id="spinCircle" />

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

Vue.js - dynamically applying CSS classes based on conditions

Within a VueNative project that utilizes NativeBase as a component library, with tags prefixed by nb-, the code snippet below is found within the <template> tags of the footer.vue file which houses navigation buttons. This piece of logic successfully ...

javascriptcssvue.jsvuejs2vue-native

What are the benefits of incorporating a mock AJAX call in testing scenarios?

I recently came across a tutorial on TDD React here and I'm having trouble understanding the following test scenario: it('Correctly updates the state after AJAX call in `componentDidMount` was made', (done) => { nock('https://api. ...

javascripttestingreactjstddnock

Displaying Image Previews in Rails View Using JavaScript

I am working on a functionality where I have a text_field that contains the URL of an image. The goal is to load this URL into an img tag and update the preview image when the user changes the URL in the text field. Below is the relevant erb code for the ...

javascriptruby-on-railsimageviewerb

When the hover effect is triggered, the background animation smoothly resets back to its initial position once the

I have a picture with a clear background that I want to add a CSS3 background animation to when the mouse hovers over it. Here is the CSS code I am currently using: @keyframes in { from {background-color: #fff;} to {background-color: #900;} } @-webkit-k ...

htmlcssbackground-colorcss-animations

Troubleshooting a page refresh error displaying "file not found" when using [angular js + NodeJS/ExpressJS] - solving the

Note: In my attempt to solve all questions and answers related to this topic, I have encountered an issue. I am developing a web application using AngularJS with HTML5, NodeJS/ExpressJS, and MongoDB for the database. However, when trying to remove the &apo ...

javascriptangularjsnode.jsexpress

Handling Circular Dependency: Injecting a Service into an HTTP Interceptor in AngularJS

I'm currently working on developing an HTTP interceptor for my AngularJS application to manage authentication. Although the code I have is functional, I am wary of manually injecting a service as I believed Angular is designed to handle this process ...

javascriptangularjs

When attempting to import and utilize a component from a personalized React Component Library, it leads to an Invariant Violation error stating: "

Currently, I am in the process of developing a React UI Kit/Component Library for internal use in our product line. Progress has been smooth so far, with everything functioning well and displaying correctly on Storybook. However, when testing the library ...

javascriptreactjswebpack

Tips for building nested columns within React Bootstrap Table

I have been working with react bootstrap table, you can find more information here You can check out the code in action by clicking here My goal was to create a table that resembles the one shown below: https://i.sstatic.net/jsZKe.png Here is an example ...

htmlcssreactjsbootstrap-5react-bootstrap

Is it considered good practice to make a POST request within a GET request?

Is it considered good practice to make a POST request while also making a GET request in my app? Or is this frowned upon? In my application, the functionality works like this: when the page loads, it needs to retrieve user data. If the user data is not fo ...

javascriptnext.js

Issue with jQuery click event not activating on initial click but functioning properly on the subsequent click

I am currently implementing the jquery.ime editor in my project, which allows for multi-language editing capabilities. The library I am using can be found here. By default, the language JSON files are loaded on "change" events. However, I would like this f ...

javascriptjqueryhtmlangularjquery-plugins

Incorporating images with text in the navigation bar

Just dipping my toes into the world of HTML and CSS, but I need some guidance. I'm trying to incorporate images and text (for the title) in my header using a navbar. However, when I resize the window, the text doesn't move along with the image. ...

htmlcssjspwebfrontend

Ensuring a consistently positioned footer at the bottom

I understand that this might not seem like a significant issue, but I'm encountering some difficulties. In my main.html file, there are three divs. The first div contains the navigation bar, the second div is an "empty" div that uses JQuery/Javascript ...

javascriptjqueryhtmlcss

Is it better to define the SVG `viewbox` once in a `symbol`, or each time an SVG is `used`?

Based on my research, some tutorials suggest that when inserting an SVG <symbol> with <use>, the viewBox property only needs to be defined once - in the <symbol> tag. While this method seems to work fine, it results in the contents of th ...

htmlsvg

Achieving CSS transition effects using the .appendChild function in JavaScript

When using the mouseenter event, I have a JavaScript function applied to an svg path element: const fadeIn = (event, locale) => { event.target.style.fill = 'hwb(' + (120 - score[locale] * 1.2) + ' 0% 0% / 1)' } This function wor ...

javascriptcssvue.jssvgvuejs3

The expected functionalities of jQuery animation are not being achieved

Here is my jQuery script: <script> $(document).ready(function () { $("#tt").mouseover(function () { $("#aa").animate({ padding: "5px 0 5px 100px", backgroundColor: "#7EEFF7", }); }); $("#tt").mouseout(function () { $( ...

jqueryhtml

HTMLKit is functioning properly on the simulator but is experiencing difficulties when running on the

Currently, I'm utilizing HTMLKit as a dependency in my project. It runs smoothly on the simulator but encounters issues when running on an actual device. Below is the crash log generated while attempting to run it on an iPhone: dyld: Library not ...

htmliosswiftxcodecocoapods

Establish an angular scope within the DOM element

I am facing a challenge in creating a new Angular scope and attaching it to a DOM element. The situation is complicated by the fact that I am working on modifying a third-party control and cannot simply use a directive. My approach so far has been: ... = ...

javascriptjqueryangularjsdom

Angular filter is designed to search for elements that contain a specific value, rather than only those that are an exact match

I am currently trying to relate rules to fields using the 'filter' filter in Angular. You can see an example of this implementation here: http://plnkr.co/edit/dQiv5lRzhQNjXZ6pVdWO?p=preview The code I am using for this purpose is as follows: &l ...

javascriptangularjs

Utilizing ngModel within the controller of a custom directive in Angular, instead of the link function

Is there a way to require and use ngModel inside the controller of a custom Angular directive without using the link function? I have seen examples that use the link function, but I want to know if it's possible to access ngModel inside the directive ...

javascriptangularjsangularjs-directiveangular-ngmodelangularjs-validation

Vue.js encounters a null value for "$slots.default()[0].el" when dynamically passing a slot using v-for

Is there a way to access the HTMLElement of a dynamically passed slot when using v-for? I'm having trouble as the element (el) always seems to be empty. app.vue : <template> <div id="app"> <prod> <span> ...

javascriptvue.jsvuejs3