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

Is there a way to apply the active class without relying on an anchor element?

After creating a one-page website, I utilized JavaScript to prevent the hash from appearing in the URL. Here is the HTML code: <ul class="click crsl"> <li><a class="page1 dot active"></a></li> <li><a class=" ...

javascriptjquery

Transitioning from mysql_connect to PDO for database connections on my website

I have been working on a script that allows for searching without the need to refresh the page. In order to enhance the security of my system, I am transitioning from using the outdated mysql_connect function to the new PDO connection. However, I am facing ...

phpjquerymysqlpdo

Increase the drop area's height when hovering in jQuery UI Drag and Drop functionality

I've been attempting to increase the height of a drop area using jQuery UI's drag and drop feature, but it's not working as I anticipated. Take a look at this fiddle for reference: http://jsfiddle.net/pn226rj9/ Specifically, I am trying to ...

jqueryjquery-uijquery-ui-draggablejquery-ui-droppable

What is the best way to access a specific attribute of an HTML element?

Within my ng-repeat loop, I have set a custom attribute like this: <div ng-repeat="item in itemsList" stepType="{{item.stepType}}"> {{item.itemValue}} </div> The possible values for item.stepType are 'task' or 'action ...

javascriptjqueryhtmlangularjsangularjs-ng-repeat

Tips for enhancing webpage load times by optimizing CSS and jQuery file handling

As a beginner in HTML and CSS, I am facing slow loading times when testing my pages on a local server. This makes me concerned about the potential loading time on the internet. Currently, I have all the files included in the <head> tag at the top of ...

jqueryhtmlcss

The trio of Javascript, Ajax, and FormData are

I'm struggling with sending form values to a PHP file. Here's the code I have: <form role="form" id="upload_form" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="formlabel">Title< ...

javascriptphpajax

The utilization of angular2-materialize is not possible due to an error message indicating that jQuery.easing is undefined

Greetings to all who are taking the time to read this. I am encountering an issue while trying to run ng serve. Here is the error message I am receiving: TypeError: jQuery.easing is undefined Here is a breakdown of what I have done so far: ng new X cd X ...

jqueryangularangular-cliangular2-materialize

How can I use jQuery to create a new div element if it is not already present

I am familiar with how to add a class if it does not already exist, for example: $("ul:not([class~='bbox'])").addClass("bbox"); Alternatively, if(!$("ul").hasClass("class-name")){ $("ul").addClass("bbox"); } However, I am unsure how to c ...

javascriptjqueryhtml

Wind - Best practices for managing the status of multiple entities within a single display prior to executing the save changes function

In my system, there are three main entities: Project, Attachment, and Messages. A project can have multiple attachments and messages associated with it. The issue arises on the project detail view, where I display the project's messages and any attac ...

c#javascriptangularjsbreeze

Using jQuery to initialize a slider with data obtained from a JSON request, which is retrieved from a PHP script

Currently, I am facing a challenge where I need to set up a jQuery Slider using data obtained from a PHP-SQL query that has been encoded into JSON format. The PHP side is functioning properly, but I am encountering difficulties in parsing the value (as th ...

phpjqueryjsonjquery-ui-slider

How to Insert PHP/MySql Data into JavaScript

As I delve deeper into PHP OOP, I feel like I'm making progress in transitioning my website. Currently, each user has their own page with a javascript grid tailored to their specific needs. For easier maintenance, I'm considering the idea of havi ...

phpjavascriptmysql

What is causing the input tag and button tag to appear on separate lines instead of together?

Here is my HTML and CSS code: <!DOCTYPE html> <html> <head> <title>assignment1</title> <meta charset="utf-8"> <meta name = "description" content="assignment"> <meta name = "keywords" content="php, assignm ...

htmlcss

Unforeseeable actions of Bootstrap-datepicker

I'm currently utilizing bootstrap-datepicker from the uxsolutions collection on GitHub and I've encountered some unusual behavior. At times, it loads properly while other times it does not: https://i.stack.imgur.com/mAVAc.png When it loads corr ...

jqueryangularjstwitter-bootstraprequirejsbootstrap-datepicker

Issue: React-Firebase-Hooks failing to retrieve dataHaving trouble with React-F

I've been utilizing the React-Firebase-Hooks package in my project, but I'm encountering some difficulties with its usage. In the code snippet below, the user.data().username is displayed correctly. However, when I try to use it within useState, ...

javascriptreactjsgoogle-cloud-firestorereact-hooksnext.js

Canceling pending asynchronous actions in React/Redux: A step-by-step guide

Imagine the scenario where a user navigates to a page and two asynchronous Redux actions are dispatched simultaneously to fetch related sets of data. If one of these fetches fails, the component will detect it and render an error component on the next cycl ...

javascriptajaxasynchronousreactjsredux

Utilize JavaScript to enclose every piece of text within single quotes in a span element

I have a tiny snippet of text: "some sample text" just a little more "additional text" I am trying to figure out how to wrap all the content between quotation marks in a span container, similar to what hilight.js does. I've been struggling to make it ...

javascripthtml

In Vue.js, I only want to retrieve and display the parent's ID or name once for each of its child components

<td v-if="currentId != loop.id" class="text-center"> <div :set="currentId = loop.id">{{ loop.id }}</div> </td> <td v-else></td> Looking to achieve a specific layout like this This invo ...

javascriptvue.js

JavaScript function returning code

I am trying to create a JavaScript object with multiple functions, but I keep encountering an exception undefined is not a function Here is my JS code: var Cars = null; $(function () { Cars = function() { return { ...

javascriptjquery

Tips for keeping Sub Menu visible at all times

Is there a way to keep the sub menu always visible on the homepage of my website's navigation? Thank you for your help! Check out my website here ...

htmlcsswordpress

Issues with Jquery Checkboxes Functionality

Hi everyone, yesterday I had a question and since then I have made quite a few changes to my code. Right now, I am attempting to make some JavaScript work when a specific checkbox is checked. However, nothing is happening when I check the checkbox. Can any ...

javascriptjqueryif-statementcheckbox