I am interested in turning a div to complete a full 360-degree rotation

I am working on a layout where I have a square and inside it, a circle. The square is positioned absolutely and the circle is positioned relatively, centered within the square. However, when I rotate the circle using the rotate property, it loses its center position and moves randomly.

Here is the HTML code:

<div class="square">
  <div class="circle">
    Dark
  </div>
</div>

And here is the CSS code:

.circle{
  width:80px;
  height:80px;
  border-radius:50%;
  border: 1px solid black;
  position:relative;
  left:50%;
  top:50%;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  cursor:pointer;
  transition:all 0.6s linear;
}

.square{
  width:120px;
  height:50px;
  border: 1px solid black;
  position: absolute;
  margin:50px;
  cursor:pointer;
  transition:all 0.6s linear;
}

.circle:hover{
  transform:rotateZ(200deg);
}

.square:hover{
  transform:rotateZ(360deg);
}

I would appreciate any insights on how to fix this issue and why it is happening in the first place. I am curious to understand the root of this behavior and how to address it.

Answer №1

To maintain the previous states of an element when changing the transform property, consider following this example:

.square:hover{
  transform:translate(-50%,-50%) rotateX(180deg);
}

Otherwise, the default behavior of the translate function will move the element to the top left corner (0,0).

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

What steps should I take to correct the color selection of a button that has been pressed down

Here is the code snippet that I am currently working with: HTTP: <label class="instructions" for="hidden_x"> Insert X: </label> <button type="button" class="button" name="button_x" value="1" id="x_1" onclick="document.getElementById(' ...

Database query is failing to return any results

Currently, I am developing a URL shortener system which involves storing data in my database such as an id, url, code, and created. However, I encountered an issue where the code does not return the required code despite checking if the entered url exists. ...

Issue: The error message "articales.forEach is not a function" is indicating

app.get('/', (req, res) => { const articales = { title: 'Test Articles', createdAt: Date.now(), description: "Test Description" } res.render('index', { articales : articales }) }) <div ...

Display HTML using JavaScript/jQuery

I am trying to figure out how to print a document by passing custom HTML code. Below is the code I have tried, but unfortunately it's not working: function Clickheretoprint() { var disp_setting="toolbar=yes,location=no,directories=yes,menubar=yes, ...

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

Browse through content without displaying the page title on the navigation bar and without the use of frames

When I sign into certain websites, I have noticed that the address displayed is often something like this: https://examplesite.com/access Even though all the links on the landing page are clickable and functional, their corresponding addresses never show ...

What causes Google fonts to fail on Heroku but succeed when used locally?

I am currently using express and heroku to host a prototype of a landing page. While the webpage functions properly when running locally, I encounter font loading issues when accessing it on heroku most of the time... The CSS files are located under /pub ...

Pause autoplay in Bootstrap v5.0 Carousel when a carousel item is clicked

I've been attempting to disable the carousel autoplay using jQuery after clicking on a carousel item, but all my efforts have been unsuccessful. Can anyone provide some assistance? Thank you! This is what I've tried so far: $(".carousel-i ...

Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

Trying to keep a three-column div from spilling over the page can be tricky. The first two columns must not exceed 200px, while the third column should be at least 280px wide. The issue arises when there is a table in the third column with long sentences i ...

Using AJAX to update content based on selected value in a dropdown menu

My challenge lies in ensuring that a select box retains the selected value from a database entry and triggers an onchange event during form editing or updating. While I have successfully populated the data in the select box based on other selections, I a ...

Can you provide guidance on how to prioritize container div style over CSS class?

Here's the HTML code snippet I'm working with: <html> <head> <style> .text-box { color: red; } </style> </head> <body> <p class=&qu ...

Utilizing ng-if within ng-repeat for dynamically generated option tags in HTML and AngularJS

I am using AngularJS to create a dropdown menu with select and option tags. The menu is referencing a model and looks like this: <select id="edit-location" class="" ng-model="packageLoc"> <option ng-repeat="x in loc" value="{{ x.locationId }} ...

Populate a dropdown list with array elements using Javascript in ReactJS

I am encountering an issue while trying to populate a dropdown with data from the 'options' array. The error message states that it cannot read property appendChild of null. Using 'document.getElementByClassName' instead of document.ge ...

How to achieve smooth transitions in CSS3 with dynamic height changes?

Currently, I am in the process of designing a unique layout. The main challenge lies in toggling between two classes for a div element, one of which has a height of 0px. To achieve this, I have successfully utilized CSS3 animations that effectively scale t ...

Follow these steps to position a child div absolutely within a grandparent div with the following structure

Is it possible to make the child div absolute for the grand parent div without changing the parent div's position? Here is the scenario: the parent div is a relative div, but the grand parent div is also a relative div. How can we achieve this without ...

Variables for Angular Material themes

My app has multiple theme files, and I select the theme during runtime. .client1-theme{ // @include angular-material-theme($client1-theme); @include all-component-colors($client1-theme); @include theme-color-grabber($client1-theme, $client1-a ...

What are some ways I can efficiently load large background images on my website, either through lazy loading or pre

Just dipping my toes into the world of javascript. I'm currently tackling the challenge of lazy loading some large background images on my website. My goal is to have a "loading" gif displayed while the image is being loaded, similar to how it works ...

Getting form field values with JQuery

I am currently facing an issue with a form field in HTML. Here is the code snippet: <form id="tasklist"> <input type="text" id="name" ...></input> ... additional form elements go here ... </form> Although I am trying to retrie ...

Unusual addition symbols in the Bootstrap stylesheet

Something unusual is occurring in my bootstrap css code. I am noticing strange plus signs that seem out of place, and I cannot pinpoint a reason for their existence. Here's an example (you might need to enlarge the view as they are quite small): Thi ...

Is there a way to showcase a row of images when a button is clicked?

I am looking to create a functionality where pressing one of the buttons shown in the image below will toggle visibility of specific sections containing 3 images each. For example, clicking on "Tapas" will only display tapas images and hide main course ima ...