Click to Rotate the Shape

I am attempting to apply a rotation effect on a shape when clicked using jQuery and CSS. My goal is to select the element with the id of x and toggle the class rotate on and off. The rotate class utilizes the CSS transform property to achieve the desired rotation.

$('#x').click(function() {
  $('#x').toggleClass('.rotate');
});
.container {
  height: 500px;
  width: 960px;
  margin: 0 auto;
  display: flex;
  background: skyblue;
}

#x {
  margin: auto;
  font-size: 9em;
  color: green;
}

.rotate {
  transform: rotate(7deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="x">x</div>
</div>

javascriptjqueryhtmlcss

Answer №1

When using certain functions in jQuery like addClass, removeClass, toggleClass, there is no need to include a dot before the class name since it is already implied that it is a class. For example:

$(this).removeClass("yourClass");
$(this).addClass("yourClass");
$(this).toggleClass("yourClass");

Your corrected question:

$('#x').click(function(){
    $('#x').toggleClass('rotate');  
});
 .container{
      height: 500px;
     width: 960px;
     margin: 0 auto;
     display: flex;
     background: skyblue;
     }
    #x{
    margin: auto;
    font-size: 9em;
    color: green;
    }
    .rotate{
    transform: rotate(7deg);
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="container">
  <div id="x">x</div>
  </div>

Answer №2

There seems to be a mistake in your Javascript code:

$('#x').click(function() {
  $('#x').toggleClass('.rotate');
});

It looks like you are using the toggleClass function, so there is no need to include a . before your selector. Instead of:

toggleClass('.rotate')

You should use:

toggleClass('rotate')

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

Exploring Next.js: Leveraging fetch to retrieve data in getServerSideProps and passing it to the client via query parameters

I'm utilizing a getServerSideProps function on the directory page. pages/catalog/index.js export async function getServerSideProps(ctx) { const response = await fetch( `http://someDomen.com/api/ipro/catalog?${ctx?.query?.page ? `page=${ctx.quer ...

javascriptreactjsnext.js

Which is better for creating a gradual moving background: Javascript or CSS?

I'm attempting to discover how to create a background image that scrolls at a slower pace than the page contents. I'm currently unsure of how to achieve this effect. A great example of what I'm aiming for can be seen here Would this require ...

javascriptcss

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...

htmlangulartypescriptscroll

dojo combobox with data loaded dynamically from JSON

I am facing an issue with populating a Combobox dynamically using a jsonRest from a cross-origin request. While I have managed to do it statically (if that's the correct term), I am struggling to implement it for multiple cases. This is just a small ...

javascriptjsoncomboboxdojo

Trigger an event in JQuery when a selector changes

Here is my HTML code with a file input: <input type="file" id="file"> I initially tried to add an onChange event listener like this: $("#file").change(function(){}); Unfortunately, it did not work as expected. I had to modify the code to make it ...

jquery

Pictures in Windows 7 have shifted to the left

After a recent migration to the Windows 7 operating system at my company, I encountered an issue. While using the same Visual Studio 2010 master file that was working fine on my Windows XP machine, I noticed that all the images below were now shifted to t ...

asp.nethtmlcss

Guide to animating an HTML element with CSS

Recently, I've been pondering the process of animating an HTML element solely through CSS. Unfortunately, my knowledge on the subject is quite lacking... I attempted to utilize the animate keyword in pursuit of this goal ...

htmlcssanimation

What is the best method for retrieving JSON POST data in ASP.NET Web Forms?

I have implemented some jquery code on my website to post data. Currently, I am testing the code by posting JSON data. However, I am facing difficulties in retrieving the data on the back-end once it has been posted. Typically, I have used Request.Params ...

jqueryasp.netjsonpostwebforms

Building a custom React carousel using visibility logic starting from the ground up

Can anyone explain the logic or algorithm behind a Carousel? I have been researching how to display one item at a time, but in my case, I need to display three items. When I click on next, I want the first item to hide and the fourth item to appear. <di ...

javascriptreactjs

Can CSS be used to generate these shadows?

Check out this image I made showcasing a board with an elongated shadow cast behind it. The intention is to emulate the look of the board leaning against a wall, resulting in a triangular shadow on either side. I'm curious if it's achievable to ...

css

Express POST request body is required

I am starting to learn nodejs and express, and while reviewing some code I found this interesting snippet. Can someone please explain what it means and how I can send a POST request to it using cURL? There are no specified data fields. app.post('/&apo ...

javascriptnode.jsexpresscurlmiddleware

"Transferring data between pages using jQuery, PHP, MySQL, and HTML

Is it possible to retrieve the value assigned to <p class="myclass"></p> using a PHP script after setting it with jQuery's $('.myclass').text('txtvalue');? For example, I want to access this value without resorting to j ...

phpjqueryajax

issues arising from a growing css division

I am facing an issue where the tiles on my webpage expand on hover, but some of them are partially covered by neighboring tiles. How can I resolve this problem? Here is the CSS code snippet: .tile { position: absolute; width: 86px; background-color ...

javascripthtmlcssonhoverjsblocks

What is the typical output value that fluctuates?

I only have one input to work with. My goal is to set the input value to "5", then display "3" in the "total" field and "4" in the "total2" field. Additionally, for every increment of +1 to the input value, I want the "total" and "total2" fields to also in ...

javascripthtml

Node.js local storage/cookie functionality

Running three different apps on Node.js at ports 3000, 3005, and 3007. I need to set a LocalStorage or Cookie variable at port 3000 and access it from the apps running at ports 3005 and 3007. Folder structure: nodep/ |-app.js (runs at port 30 ...

javascriptnode.jscookieslocal-storage

What is the best way to utilize Link navigation in order to navigate away from a blocked route in the latest version of Next.js,

DISCLAIMER: I raised this issue on the Next.js GitHub repository, but it was closed without recognition. The solution provided did not resolve my problem, leading me to seek help here. The Issue at Hand I have created a demo app (accessible here) on Code ...

javascriptreactjsnext.jsnext.js13nextjs-dynamic-routing

Tips on creating a unique d3js tree design

I am a beginner when it comes to d3js and javascript in general. My goal is to create an interactive IP administration overview using d3js by modeling json data. I know that the key tool for this job is likely d3.layout.tree, which will provide me with the ...

javascriptjsond3.js

Searching for the index of an item in a PHP array using the inArray jQuery method

I came across this code snippet online that seems to achieve what I'm looking for: $(document).ready(function(){ var arrData = [ "j", "Q", "u", "e","r","y" ]; alert(jQuery.inArray("Q", arrData)); }); Now, I have an array generated from a ...

phpjqueryarrays

Leveraging Angular 6: Implementing custom scripts on a component basis and verifying their presence

I need some help with a script that I want to run on a specific component only. I've managed to add the script to the component, but there are a few issues that I'm unsure how to fix. When I go to the component, the script is added to the DOM b ...

javascriptangularexternal-script

Placing an image at the forefront of all elements

Recently, I created a horizontal opt-in bar for my Newsletter on my website. Instead of the traditional submit button, I decided to use an image by incorporating some CSS: #mc_embed_signup input.button { background: url(http://urltotheimg.com/image.jpg); ...

htmlcssforms