Page rotates on hover effect with RotateY

How can I get an image to rotate on the Y axis when hovered over? My code works in -moz- but not in -webkit- or -o-. What am I missing?

.spin-logo {
  height: 450px;
  margin: 0 auto;
  -moz-transition: transform 2000ms ease 0s;
  -o-animation: transform  2000ms ease 0s;    
  -webkit-animation: transform 2000ms ease 0s;
  animation: animation 2000ms linear ease 0s;
}
.spin-logo:hover {
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

Answer №1

Upon further examination, it became clear that replacing -o-animation and -webkit-animation with transitions was the solution I needed. Issue resolved!

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 for me to automatically update a webpage every 5 minutes, beginning at 8:01 a.m., and subsequently at 8:06 a.m., and so forth?

<html> <head>Harshal</head> <script> var limit="5:0" var doctitle = document.title var parselimit=limit.split(":") parselimit=parselimit[0]*60+parselimit[1]*1 function beginrefresh(){ if (parselimit==1) window.location.reload ...

Silky animations in kinetic.js (html5 canvas)

I am seeking a better grasp on kinetic.js animation. Recently, I came across a tutorial at . After experimenting with the code provided, I managed to create an animation that positions my rectangle at x coordinate 100. However, I am struggling to achieve s ...

What criteria does a PHP function need to meet in order to be considered valid for use with AJAX and PHP?

My website includes an input field that undergoes real-time checking via AJAX requests to inform users if their input is valid or not. Upon submission, the input must be rechecked to ensure it meets the same criteria as checked by AJAX (in case JavaScript ...

What is the best way to achieve this Bootstrap design without copying the content?

Trying to achieve a specific Bootstrap layout without repeating content is my current challenge. Essentially, I aim to divide some content into 2 columns at the sm/md breakpoints and then switch to 3 columns for the lg breakpoint. The layout for sm/md bre ...

The image must be able to fit within the div container without distorting its proportions

Recently, I created a slider that functions flawlessly. However, I am struggling to make the image fit inside the div without distorting its proportions. I've tried various methods but haven't been able to achieve the desired result. Could you p ...

Open the navigation menu by clicking on either the navigation links or anywhere outside of it

Seeking a solution for my mobile navigation menu that closes when clicking outside the links or on one of them, without using jQuery. How can I achieve this with JavaScript ES6? Current code snippet: const navSlide = () => { const burger = docum ...

How can I retrieve information from an HTML or JavaScript object?

Imagine a scenario where you have an HTML table consisting of 5,000 rows and 50 columns, all generated from a JavaScript object. Now, suppose you want to send 50 checked rows (checkbox) from the client to the server using HTTP in JSON format. The question ...

The Elusive Key to Perfect Layouts and its Transformation

Today I discovered the Holy Grail of Layouts while coding, but when I implemented it, the output in browsers was not as expected. The borders were incomplete and strange: Here is the code snippet that caused the issue: #container { border: 10px soli ...

The data is not being displayed in the table

I am encountering an issue while attempting to populate the table with data received through props by looping over it. Unfortunately, the data is not rendering on the UI :( However, when I manually input data, it does show up. Below is my code: Code for P ...

Is there a way for me to make the two form fields expand and fill the gap between them?

I've created a form with the first name and last name fields displayed horizontally next to each other, as shown in the image. When a user clicks on a field, it should change color (still pending coding). However, there seems to be an unwanted gap be ...

Limiting the size of textboxes in Twitter Bootstrap

I am currently working with bootstrap text boxes in the following manner: <div class="row"> <div class="col-lg-4"> <p> <label>Contact List</label> <select class="form-control" id="list" name="li ...

Is it possible to manipulate an Angular #variableName in order to retrieve an ElementRef for an HTML element?

Suppose I have a scenario where I create a button like this: <button #myButton>My Button</button> ...and then use ViewChild in the following way: @ViewChild('myButton', { static: true }) createButton: ElementRef; In this case, creat ...

Guide to making an `Ajax Login` button

I am interested in creating a SIGN IN button using ajax. Specifically, I want it to display something (such as welcome) on the same page without refreshing it. This is the progress I have made so far: update2: <form id="myForm" onsubmit="return signi ...

Adjusting Bootstrap CSS Styles

After recently installing bootstrap 3.0 on my website and experimenting with it, I have a few questions. I am looking to customize certain aspects of the jumbotron (and other classes) in my personal .css file named "mycss.css". Here is the code I have add ...

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

After updating the External SS, the background vanishes

There appears to be an issue with a page that I designed. I originally wrote the CSS code internally within the <style type="text/css>...</style> section, including a background image, and all was working fine initially. However, after transf ...

Using Roboto Typeface in Cascading Style Sheets

I am currently working on implementing the "Roboto" font in my Prestashop website. The design files I received are in .psd format, and the graphic designer used fonts "Roboto Medium" and "Roboto Regular". To clarify, if I want to use Roboto Normal, can I s ...

Obtaining the date input value from the ng2-date-picker component in Angular2

I am struggling to extract the value from a date picker input field (ng2-date-picker). Despite attempting various methods to retrieve the value, I have not been successful. For reference, here is the link to the npm package I am utilizing. This represent ...

The issue of ngModel not binding to the value of ion-select in Angular Ionic

Having an ion select outside of a form with an ngModel attribute bound to "selectedValue", I encounter an issue where my selections are not being properly populated in the selectedValue variable even though they appear in the ionChange method. The main pur ...

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...