Image transformation not rotating the image

I'm having trouble making an image of an X rotate 180 degrees when it's hovered over. Instead of rotating, the image just moves up and to the right.

What am I missing that's preventing this from looking like a smooth 180-degree spin?

.black {
  background: #000;
  width: 100%;
  height: 400px;
}
.popup-close {
  position: absolute;
  top: 40px;
  right: 40px;
}
#x-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
}
<div class="black">
  <a class="popup-close" data-popup-close="popup-1" href="#">
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close">
  </a>
</div>

htmlcsstransformcss-transforms

Answer №1

When you hover over it, the cross moves upwards and to the right due to the addition of a translate transform. It seems like this transformation is intended to center the element, but it might be more effective if applied in the default state of the element itself.

The rotation effect is actually taking place, although it may not be noticeable because a 180-degree rotation of a cross results in the same appearance. To visualize the rotation, consider adding a transition or adjusting the angle of rotation.

.black {
  background: #000;
  width: 100%;
  height: 400px;
}
.popup-close {
  position: absolute;
  top: 40px;
  right: 40px;
}
#x-close {
  transform: translate(50%, -50%);
  transition: transform 1s ease;
}
#x-close:hover {
  -webkit-transform: translate(50%, -50%) rotate(180deg);
  transform: translate(50%, -50%) rotate(180deg);
}
<div class="black">
  <a class="popup-close" data-popup-close="popup-1" href="#">
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close">
  </a>
</div>

Answer №2

Here is a live demonstration for you to see.

To incorporate this into your code, include the following CSS:

#x-close{
       -webkit-transition: -webkit-transform .6s ease-in-out;
      transition: transform .6s ease-in-out;
        -webkit-transform: translate(50%, -50%);
        transform: translate(50%, -50%) ; 
    }

Answer №3

This is the solution I came up with:

@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(180deg); }
}
@keyframes spin {
    100% {
        -moz-transform:rotate(180deg);
        -o-transform:rotate(180deg);
        transform:rotate(180deg);
    }
}

Visit this link for a demo

Answer №4

Try this out:

#x-close:hover {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: transform 0.5s ease;    
    transition: transform 0.5s ease;
}

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

Developing a hovercard/tooltip feature

I'm currently working on developing a hovercard feature for a social media platform I'm building. The concept involves displaying additional information about a user when their name is hovered over. The hovercard will appear with the user's ...

jqueryhtmlcssajax

When clicked, the onClick feature will reduce the number each time instead of initiating the timer

Currently, I am working on a meditation application using React. As a starting point, I implemented a 25-minute countdown feature. The challenge I am facing is that the timer starts counting down each time the button is clicked, rather than triggering it ...

javascripthtmlcssreactjsjsx

What is a PHP self-generating variable?

Is it possible to use a form variable as its own URL? It may be difficult to explain, but here's an example: matchmaking.php: $search_summoner = $_POST['search_summoner']; echo '<form method="post" action="matchmaking.php?searc ...

phphtmlforms

Troubleshooting Problem with Padding in ion-content for Ionic Angular

I am currently developing my inaugural Ionic application. The initial template I utilized was the rudimentary sidemenu layout. $ ionic start myApp sidemenu Afterwards, I crafted a straightforward page featuring a list which appears as follows... <ion ...

javascriptcssangularjsionic-framework

Creating dynamic SVG animations through CSS instead of relying on the <animateMotion> tag offer greater flexibility and control

I am attempting to position an arrow at the midpoint of a bezier curve. The method outlined in this StackOverflow question, which involves using <animateMotion> to move a <path> representing the arrow and freezing it at the center of the curve, ...

cssanimationsvg

Scraping a website where the page source doesn't match what is displayed on the browser

Imagine I'm interested in extracting marathon running time data from a specific website: Upon inspecting the webpage using Google Chrome, I noticed that the desired data is not directly visible in the page source. Although I have successfully scraped ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

What is the method for writing the following line in CSHTML server-side code?

<script> function a(id) { var table = document.getElementById(id); .... } </script> @{ //Is there a way to rewrite the line "var table = document.getElementById(id)" here within the ser ...

javascripthtmlclient-sideserver-side

Is there a way to dynamically update text using javascript on a daily basis?

I am currently developing a script to showcase different content and images every day. While I have successfully implemented the image loop to display a new picture daily, I need assistance in achieving the same functionality for the title. My aim is to c ...

javascriptjqueryhtmldynamic

Concealing overflow for text content through CSS styling

I am currently working with an element that contains both an image and text. View the Fiddle here Note: To see the full grid, resize the preview accordingly. The CSS I have written is as follows: .gridster .gs-w .item{ position: relative; wi ...

javascriptjquerycssgridster

Interactive search tool with multiple fields using HTML and JavaScript

I need help developing a search box for structured data, where I want to implement two types of typeahead searches: one for fields and another for values within those fields. The image below illustrates what I am aiming for. My backend systems are all set ...

javascriptjqueryhtmlsearch-box

Exploring the integration of Selenium WebDriver with a Polymer website and its Shadow root functionality

When I use Google Chrome console, I can easily click on a Shadow root element using the following code: document.querySelector('html /deep/ next-tab').querySelector('a').click() However, when I tried to do the same thing with web-driv ...

javahtmlselenium

Tips for including an external babel JS (ES6) file in an HTML document:

To include the babel js file in an HTML file, take a look at the code snippet below: <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudfl ...

javascriptjqueryhtmlecmascript-6babeljs

Is there a way to position the button at the bottom right corner of my div box?

Having trouble positioning the button in the bottom-right corner of the parent div? I attempted using float: right;, but it ended up outside of the box. How can I keep the button within the box and align it to the bottom-right corner? If you have a solutio ...

htmlcss

What causes the delay in CSS animations?

Is there a way to trigger an "updating" image to spin while a long JavaScript function is running? I am currently using JQuery to add a class called "spinning", defined in my CSS for the animation. The problem is that when I add the class and then call a l ...

javascriptjqueryhtmlcssanimation

Unable to insert HTML code into a div upon clicking an image button

I am in the process of developing a website dedicated to radio streams, and I was advised to utilize Jquery and AJAX for loading HTML files into a div upon button click. This way, users wouldn't have to load an entirely new page for each radio stream. ...

javascriptjqueryhtmlcssajax

problem with the video pathway in the javascript document

I'm currently in the process of putting together a Video gallery playlist using HTML, CSS, and JavaScript. So far, I've set up the html and css files along with two js files. The first js file contains all the video information as shown here: ...

javascripthtmlcss

How can I ensure that PrimeNG is functioning properly?

I'm encountering some difficulties setting up PrimeNG correctly to utilize its rich text editor. Despite installing all the necessary components, it's still not functioning as expected. https://i.stack.imgur.com/4kdGf.png This is my package.jso ...

htmljsontwitter-bootstrapangulartypescript

Align the center of table headers in JavaScript

I'm currently in the process of creating a table with the following code snippet: const table = document.createElement('table'); table.style.textAlign = 'center'; table.setAttribute('border', '2'); const thead ...

javascripthtmldom

Angular2's hidden feature isn't functioning properly

There is a common suggestion to use *ngIf better than [hidden] but in my scenario, I want to keep the element in the DOM without it being visible. In my component.html file, I have: <article #articleId id="bodyArticle" [hidden]="isClicked"></art ...

javascripthtmlcssangulartypescript

Using PHP to substitute a particular HTML tag with new content

Here is an example of HTML code: <div> <h1>Header</h1> <code><p>First code</p></code> <p>Next example</p> <code><b>Second example</b></code> </div> I am tryin ...

phphtmldomdocument