The rotation function of the div element is malfunctioning

Exploring CSS has led me to a peculiar issue where transform:rotate is not functioning as expected. Here is an instance of the animation not triggering: jsFiddle

CSS

.close {
        width:100px;
        height:100px;
        background:#00f;
        color:#fff;

        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .close:hover {
        -webkit-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

    .close, .close:hover {
        -webkit-transition:rotate .2s ease-in-out;
        -moz-transition:rotate .2s ease-in-out;
        -o-transition:rotate .2s ease-in-out;
        -ms-transition:rotate .2s ease-in-out;
        transition:rotate .2s ease-in-out;
    }

Any insights on why this is not functioning properly?

Thanks ;)

htmlcsscss-transitionscss-transforms

Answer №1

You incorrectly applied the transition to an incorrect attribute: (View the working jsFiddle example)

.close { /* The :hover pseudo-class is not necessary here */
    -webkit-transition: -webkit-transform .2s ease-in-out;
       -moz-transition:    -moz-transform .2s ease-in-out;
         -o-transition:      -o-transform .2s ease-in-out;
        -ms-transition:     -ms-transform .2s ease-in-out;
            transition:         transform .2s ease-in-out;
}

The attribute that should be animated is transform. The function rotate() is a transformation function, not a CSS property.

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 is the process for modifying a Joomla plugin?

Just starting out with Joomla development and recently installed Joomla 2.5 on my local computer for some practice. I have a question about editing Joomla plugins - specifically the layout of the Content - Pagebreak plugin (the pagination that appears wh ...

phpcssjoomla2.5

What could be causing the NoScript tag to malfunction across different web browsers?

I've incorporated the NoScript tag into my JSP pages in the head section. To avoid conflicts with tiles, I made sure not to include multiple NoScript tags. However, I am experiencing issues in Internet Explorer where it doesn't seem to be working ...

javascripthtmljsp

Revamping HTML with AngularJS Directive: Enhancing the Layout with New Angular Attributes

I am currently facing an issue with the compiler not recognizing a new attribute I have added in a directive. In my Angular TypeScript code, I have the following setup: public class MyDirectiveScope: ng.IScope { foo: boolean; } public class MyDirecti ...

angularjshtmlangularjs-directivetypescript

The .find() function conveniently jumps over the table directly following its parent element

After clicking on Inner Add Row, the correct row is added from the .charts-series table. However, when I click on Outer Add Row, a row from the .charts-series table is added instead of one from the .charts table. Here is the link to the example: http://jsf ...

jqueryhtmljquery-selectors

I am attempting to display the Δ symbol on my website, however, it is not appearing on the webpage

In my attempt to display my company logo on the website, I encountered an issue where the Δ symbol is not appearing correctly in the browser. strong class="footer-logo">KyΔnsys</strong To address this problem, I have implemented unicode charset=" ...

htmlcssbrowsersymbolsgraphical-logo

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

htmlcsstwitter-bootstrapbootstrap-5

How can we assign priority to the child element for detection by the "mouseover" event in jQuery?

Can you help me figure out how to make the "mouseover" event prioritize detecting the child element over its parent? This is the jQuery code I've been using: <script> $(function() { $("li").mouseover(function(event){ $('#log&a ...

javascriptjqueryhtmldom

Implementing a JavaScript file and ensuring W3C compliance

I recently purchased a template that included a javascript file in the main page with the following code: <script src="thefile.js?v=v1.9.6&sv=v0.0.1"></script> Upon inspection, I noticed there are two arguments at the end of the file ...

javascripthtmlw3c

How can you identify the resume of a web application once you return from opening the camera?

I'm working on a web application that utilizes the camera by following steps from this solution: How to access a mobile phone's camera using a web app? However, I am trying to figure out how to implement a callback function once the user return ...

javascripthtmlcamera

Steps to display selected value on another page

Presented below is the code snippet: <html> <head> <meta charset="UTF-8"/> </head> <body> <!--Text field area starts here--> <H3>My Surveys </H3> <hr> <br> <br> <br> <ol> < ...

phphtml

How to adjust the timezone settings in PHPMyAdmin on a shared server platform

I'm having trouble changing my timezone to India on my shared server database. I've tried everything but can't seem to get it to work. My website is built using PHP Codeigniter The contact us page on my site saves all inquiry details to my ...

javascriptphphtmlcodeigniter

Creating an array of logos in ReactJS with the help of TailwindCSS

After seeing multiple implementations of this feature, I find myself struggling to search for a solution. I can only access the HTML and CSS through inspecting elements, wondering if others are facing the same issue as me. Typically, we aim to implement t ...

javascriptcssreactjstailwind-css

Jquery problems impacting every element rather than only one

I'm currently experimenting with a small project where I have multiple div elements containing an image, h1 tag, and p tag all sharing the same class name. My goal is to add CSS effects that make the h1 tag and p tag slide into view and become visible ...

jquerycss

Nesting conditions within partials using Handlebars

Hey there! I'm having an issue with my page layout, here's what it looks like: --- title: Coffee replace: true --- {{> products-list-style}} So, my partial "products-list-style" is like this: {{#if ../replace}}Replace{{else}}Add to Cart{{/i ...

htmlhandlebars.js

I am having trouble understanding why dropdown menus with the same content have varying widths

My issue is illustrated in the screenshots below: first-dropdown: second-dropdown: The second dropdown appears slightly wider on the right side. Despite Google Chrome's claim that the widths are the same. HTML code: <div class="row menu"> ...

htmlcsstwitter-bootstrap

Transfer dynamically generated table data to the following page

Seeking guidance on a common issue I'm facing. I am creating a table using data from Firebase upon page load, and I want users to click on a row to view specific details of that item. It may sound confusing, but it will make more sense with the code p ...

htmlangulartypescript

Creating an Angular 7 Template using HTML CSS and Javascript

I recently acquired a template that comes with HTML, CSS, and Javascript files for a static webpage. My goal is to integrate these existing files into my Angular project so I can link it with a Nodejs application to create a full-stack webpage with backend ...

javascripthtmlcssangular

What is the best way to create a grid layout that is responsive using HTML and CSS

I have been searching all over the internet and have not been able to find a grid layout like this. The "grid-template-columns" property is not achieving what I need, as I cannot make one box larger than the others. I am looking to create 4 equal boxes an ...

htmlcsscss-grid

Using a JavaScript if statement to check the height of a specific HTML element

I have been struggling to figure out how to insert an if-else statement in JavaScript that references data about an HTML element. My objective is to create an "onclick" function that enlarges an image with a 200ms delay and another function that returns th ...

javascriptjqueryhtml

Perform an Ajax request with JQuery in an HTML document and transfer the response to a different HTML page

This is my first attempt at using AJAX and jQuery to retrieve data from another HTML page. Below is the code I have written: Here is my JavaScript code: <script type="text/javascript> $(document).ready(function() { $('#submit').click( ...

javascriptjqueryhtmlajax