Restore the image to its initial position following a 180-degree rotation

I am having trouble with rotating an image using code. I have tried setting 

-webkit-transform=rotateY(180deg)
and want to bring the image back to its original position on a click event. However, when trying to use rotateY(-180deg), it is not working as expected.

var status = 1;
function flipIt(obj) {
    console.log("value before Function status   " + status);

    if (status == 1) {
        $(obj).css("-webkit-transform-style", "preserve-3d");
        $(obj).css("-webkit-transition", "all 1.0s linear");
        $(obj).css("transform-style", "preserve-3d");
        $(obj).css("transition", "all 1.0s linear");

        $(obj).css("-webkit-transform", "rotateY(180deg)");
        $(obj).css("transform", "rotateY(180deg)");

        status = 0;
        console.log("after if value set status   " + status);
    } else {
        $(obj).css("-webkit-transform-style", "preserve-3d");
        $(obj).css("-webkit-transition", "all 1.0s linear");
        $(obj).css("transform-style", "preserve-3d");
        $(obj).css("transition", "all 1.0s linear");

        $(obj).css("-webkit-transform", "rotateY(-180deg)");
        $(obj).css("transform", "rotateY(-180deg)");
        
        status = 1;

        console.log("ater else value set status   " + status);
    }
}

Any assistance would be greatly appreciated.

jqueryhtmlcsswebkit-transform

Answer №1

Instead of using a negative value like -180 degrees, try setting it to 0 degrees.

$(element).css("transform","rotateY(0deg)");

This should prevent the element from rotating since the rotation is calculated based on its original position.

Answer №2

While I'm still learning about this topic, my current understanding is that rotations are based on the original position. Therefore, resetting the rotation to 0 would bring it back to its initial orientation. Additionally, when implementing transitions, keep in mind that a rotation of x degrees is not equivalent to 360 - x degrees, as this can impact the direction of rotation.

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

Initiate an "execute.document" command directly from the address bar

While reviewing my old website, I stumbled upon this snippet: <input type="image" id="QuickPass" name="QuickPass" src="/images/QuickPass.gif" alt="Quick Pass" onclick="document.pressed=this.value" value="QuickPass" /> nestled within this form: & ...

javascripthtmlurl

Instructions for concealing a parent div and substituting it with a different div upon the user's click on a button nested within the parent div

I am working on a component that consists of two buttons. The goal is to hide the entire component when one of the buttons is clicked and replace it with another component. Although I have successfully hidden the clicked button, I am struggling to hide th ...

javascriptcssreactjs

Utilizing form selectors in non-traditional elements

Trying to optimize my website by avoiding nested forms, I have multiple forms loaded via AJAX. Instead of nesting them, I plan to use select and checkbox selectors along with jQuery actions outside the form element. Here's what I have in mind: <di ...

jqueryhtmlajax

Fixed width div displaying too large on iPad screens

Seeking to enhance the performance of a specific webpage on iPad, I have conducted a test. To view the test-page, please click on this link: The page includes a black box with a width set at 800px. However, upon viewing it on my iPad and taking a screensh ...

htmlcssipad

Load information from a JavaScript object when the user clicks dynamically

My challenge involves utilizing a JavaScript object that contains video information such as title and source URL. Within my HTML, I have image placeholders and the goal is to trigger a modal pop-up (using Twitter Bootstrap modal) of the specific video when ...

javascriptjqueryhtml

Increase or decrease the quantity of items by cloning with Jquery and dynamically changing the ID

Currently, I am working on a jQuery clone project where I need to dynamically add and delete rows. Despite searching extensively on Stack Overflow and Google, I only have a basic understanding of how jQuery clone works. Any suggestions would be greatly ap ...

javascriptjqueryhtmlcss

I am interested in manipulating the ng-show directive by referencing values in an ng-repeat array

In my coding project, I am trying to dynamically set the value of `ng-show` using a variable so that I can update it as needed. The AngularJS code snippet is as follows: var arrowup, arrowdown; arrowdown = false; $scope.header=[{"name":"Subsection ...

javascripthtmlarraysangularjsng-show

Leveraging AJAX for managing multiple selection options without the need for a submit button

Currently, I have a page featuring two select buttons. Whenever both are selected, the page should update automatically. Furthermore, each time a new option is chosen, the page needs to keep updating on its own. Below is my HTML code: <form action="" m ...

javascriptphpjqueryhtmlajax

Table data is being displayed from form data in another file using only JavaScript

I am trying to figure out how to use local storage to store form data in one HTML file and display it in a table on another HTML file. The form data should be stored in the columns of the table but on a separate page. Can anyone provide assistance with thi ...

javascripthtml

When jQuery.hide() is called inside a Deferred callback, the callback will not be triggered

I am currently enhancing [a modified version of] jWizard, by adding support for event handlers to return Promise objects. The code below functions correctly: Trigger the "stephide" event on the element. If the event is not canceled, hide the element. Af ...

javascriptjquerycallbackjquery-deferreddeferred

My jQuery function is failing to execute properly following an AJAX callback

I am currently utilizing asp.net 3.5 on my project. Everything operates smoothly with a jquery function triggered by the 'hover' event. An issue arises after refreshing the browser, which triggers some divs to update using ajax calls. After th ...

jqueryasp.netajaxupdatepanel

I encountered an issue where I was unable to customize the styling of the

I'm facing an issue where I cannot override the style using `className` on a `Button`. Interestingly, the same style works correctly on a `TextField`. However, when I use the `style` prop, it allows me to successfully override the `Button` style. What ...

cssreactjsbuttonmaterial-uistyles

Invoke the jquery.load(); function within a preexisting JavaScript file

My goal is to avoid loading javascript with jquery or any similar methods. Currently, I am customizing swfupload (if you are acquainted with it, that's helpful, but not necessary) for a website I am developing. I require the capability to upload, sto ...

phpjavascriptjqueryajax

Enhancing User Experience with AJAX Page Loading and Progress Tracker

I'm looking to create a jQuery AJAX page load with a progress bar displayed at the top. I came across a helpful example of what I have in mind here. Any tips on how to get started would be greatly appreciated. This will be implemented on a WordPress ...

javascriptajaxwordpressjquery

Construct a connection between divs

Which element is necessary to generate black lines within the image ? [![enter image description here][1]][1] I have already coded but I'm seeking to produce lines similar to the image (between images). What's the process for achieving this? Kin ...

htmlcssbootstrap-4

Scrolling the page horizontally using AJAX

I am working on creating a website similar to France24.com. I envision a layout with navigation on the left and two arrows on each side for scrolling horizontally. When users click on the arrows or any of the navigation items, I want the related page to pr ...

cssajaxhtmlpreload

Display a PanelGroup on JSF when a p:tab is clicked

My current frontend is developed with JSF and it loads a large amount of data, which may not always be necessary for the user. This data is categorized under a tab that is rendered based on a specific condition: <p:tab id="summary-tab2" title="Title of ...

jqueryhtmljsfjsf-2.2

Guide for getting JavaScript Word Counter to function correctly in Internet Explorer

As a JavaScript beginner, I recently implemented a word counter on a form using JavaScript. It works smoothly across all browsers except for Internet Explorer. In IE9 and IE11, the word counter becomes unreliable, and at times, the entire field can become ...

javascriptjqueryword-count

Sliding down with a delay using jQuery

I'm attempting to create a hidden div that slides down when a button is clicked and then waits for about five seconds before sliding back up. I've experimented with using delay(), but I'm unsure if I'm applying it correctly. Additionall ...

javascriptjquery

Pause until the existence of document.body is confirmed

Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, a ...

javascripthtmlcssevent-handlingdom-events