JQuery .click Event doesn't center elements even with transform-origin adjustment

In the JSfiddle provided below, you can see that after a click event occurs, two span (block) elements rotate 45deg to form an "X". However, both elements are slightly shifted left, creating an off-center "X" relative to the parent's true center-origin.

I am looking for a solution to ensure that my "X" forms in the parent's true center. I have searched extensively but haven't been able to find a satisfactory answer. Any help would be greatly appreciated.

Currently, I'm using the following "transform-origin" to create the "X" after the click event:

transform-origin: 21% 50%;

Things become chaotic without this line of code.

You can view the JSfiddle here: https://jsfiddle.net/STEEZENS/L74p1ok3/

HTML

<a href="#" id="hamburger-icon" title="Menu">
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

javascriptjquerycsscenter

Answer №1

I successfully attained the desired outcome by adjusting the transform-origin to an absolute value in pixels and incorporating translateX, along with rotation, to compensate for the perceived translation that was present previously.

Explore the code on JSFiddle

#hamburger-icon .line {
    display: block;
    position: absolute;
    width: 75px;
    height: 4px;
    border-radius: 4px;
    background-color: white;
    transition: all .3s ease 0s;
    transform-origin: 21px center;
}
#hamburger-icon.active-rotate .line-1 {
    transform: rotate(45deg) translateX(6px);
    -webkit-transform: rotate(45deg) translateX(6px);
    -moz-transform: rotate(45deg) translateX(6px);

}
#hamburger-icon.active-rotate .line-3 {
    transform: rotate(-45deg) translateX(6px);
    -webkit-transform: rotate(-45deg) translateX(6px);
    -moz-transform: rotate(-45deg) translateX(6px);
}

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

Automatically scroll to the end of the data retrieved through ajax

I am currently developing a live chat website for my users and I am using ajax to fetch the chat messages. However, I am facing an issue where whenever I enter a new message, it does get added to the database and displayed, but the scroll doesn't auto ...

javascriptjquerycssajax

Utilizing "this" in a situation where the function and selector are not combined

When it comes to utilizing this in different scenarios, the results may vary. In example 1, we see that by directly accessing this, we are able to obtain the correct result. $("#my_div").on("click", function () { alert( $(this).attr("id") ) }); Howev ...

javascriptjquery

Achieving dynamic population of a second dropdown menu based on selection from the first dropdown menu using PHP

In my current project, I am faced with the task of populating three different menus. The first menu is generated using a MySQL query in PHP and displays TV shows like "Modern Family" or "Dexter". What I want to achieve is that once a TV show is selected fr ...

phpjavascriptmysqlajax

Issue with JavaScript Date.parse function not functioning as expected

I have implemented a date validation method in my application to check if a given date is valid or not. myApp.isValidDate = function(date) { var timestamp; timestamp = Date.parse(date); if (isNaN(timestamp) === false) { return true; } return ...

javascriptdatedate-parsing

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

Developing dynamic progress indicators in Django - A guide

I'm in the process of figuring out how to create a real-time progress bar for updating. The idea is that the server will update the user periodically on the current progress. Fortunately, I am familiar with making an Ajax call using Django and jQuery ...

javascriptjqueryajaxdjangoprogress-bar

CSS: The Ultimate Guide to Concealing the Second Row in a Table

I have a single table in my code: <table> <tr><td>sample data 1</td></tr> <tr><td>sample data 2</td></tr> <tr><td>sample data 3</td></tr> <tr><td>sample data 4</t ...

htmlcss

How can I conditionally disable a button in Vue.js using an if statement?

Can someone help me figure out why all my buttons are getting disabled when I only want one to be disabled? Here is the code where I created a counter with vue.js: <body> <div id="app"> <button @click="co ...

javascriptvue.js

Leveraging jQuery or PHP to lessen the workload

As I set up a registration page, I am relying mainly on PHP to validate the data. Realizing that incorporating client-side validation will lessen the server's load, I'm interested in utilizing jquery for this purpose. Specifically, I am seeking ...

phpjqueryajax

What steps can be taken to ensure your bot successfully sends the second argument?

Who just handed out an L to user#0000? Looks like JohnGameRage#0000 did! ...

javascriptdiscord.js

Customize your Angular UI Bootstrap Datepicker with unique buttons - here's how!

Currently, I have a datepicker with clear and close buttons. I tried using the append function to add more buttons to this datepicker, but it didn't work because the content is not loaded until we click the icon since it's a popup datepicker. Is ...

javascriptangularjsdatepicker

Tips for displaying specific HTML elements in AngularJS using ng-repeat and ng-if

I am working with some bootstrap HTML code that includes an ng-repeat function. <div class="row"> <div class="col-lg-4" ng-repeat="p in persons"> <img class="img-circle" src="images/{{ p.image }}" width="140" height="140"> < ...

javascripthtmlangularjsangularjs-ng-repeat

Don't conceal the :after and :before elements when using CSS custom checkboxes

I have created my own custom checkboxes using this CSS code: input[type="checkbox"]{ display: none; } .checkbox{ position: relative; width: 60px; height: 19px; background-color: green; border-radius: 10px; } .checkbox input[type="checkbox"] + ...

htmlcssbuttoncheckbox

Differences between CSS Display None and Collapse

Can you explain the distinction between the following two options? display: none; visibility: hidden; I always thought that visibility: collapse was only applicable to tables. Am I mistaken? ...

htmlcss

Creating visually appealing websites is made easy with Bootstrap 5's innovative image and

I am working on a Bootstrap 5 website template and I want to add text with a white background in the center of an image. Instead of seeing just a white color over the image, I would like to have a white rectangle with a title and text centered on the imag ...

htmlcsstwitter-bootstrapbootstrap-5

How to Incorporate LessCSS into the Blueprint Framework?

Can LessCSS be integrated with Blueprint framework? What are the prerequisites for starting? ...

cssless

Solving Problems with Image Placement using CSS

As I embark on learning responsive CSS, the concept is still quite new to me. One issue I'm facing is the alignment of the images on the second row in comparison to the top images. I aim to have 4 images per row, with the flexibility for the image siz ...

cssimage

Check if an object is already in an array before pushing it in: JavaScript

Summary: I am facing an issue with adding products to the cart on a webpage. There are 10 different "add to cart" buttons for 10 different products. When a user clicks on the button, the product should be added to the this.itemsInCart array if it is not a ...

javascript

What is the best way to begin at a specific index in an array without skipping any elements?

As I continue my journey of learning JS, I have encountered a task that has left me quite perplexed. The objective is to provide an index to start from and also include the items missing in the array while displaying them in an angular format. Here is what ...

javascriptarraysangular

Missing inkbar in Material UI tabs when using ReactJS

For some reason, the small inkbar is not appearing under this tab. I suspect it might be a css issue that I can't seem to figure out. It's possible that I'm missing something I don't know about or maybe the height of the tab is too high ...

cssreactjsmaterial-ui