Create a spinning 3D CSS3 element that rotates constantly

I recently created a unique two-sided element that smoothly rotates around the Y axis using the powerful CSS3 transform: rotateY() property, inspired by fantastic examples found at .

While I have successfully made it rotate on hover or at specified intervals, my current challenge is achieving continuous spinning. Below is the script I am currently working with, but I'm struggling to effectively "reset" the transform in order to create a seamless one-directional spin without the back and forth rocking motion.

setInterval(function() {
        $('.hover').removeClass('reverse').addClass('flip');
    setTimeout(function() {
        $('.hover').removeClass('flip').addClass('reverse')
    }, 1500);
}, 3000);

I'll skip over detailing the CSS as it closely resembles what's demonstrated on the example page. Nonetheless, the presence of the .reverse class serves as a replica of .flip, featuring specific values for transform: rotateY() aimed at guiding it back to its initial position while maintaining a consistent direction.

jquerycss3dtransformrotatetransform

Answer №1

To achieve the desired effect, utilize keyframe animations in your code. Consider implementing something similar to the following:

        @-webkit-keyframes rotate-full {
            0% {
            -webkit-transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
          }

          50% {
            -webkit-transform: rotateY(180deg) rotateX(180deg) rotateZ(180deg);
          }

          100% {
            -webkit-transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
          }
        }

For demonstration purposes, here's an example of a previous project I worked on:

http://codepen.io/jeffpowersd/pen/mCbhq

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

Divider displayed between images in Internet Explorer 8

On my website, I have arranged four images in a square using the code below: <div id="tempo_main"> <div id="tempo_content"> <div style="text-align: center;z-index: 3;position: absolute;right:350px; left:350px; t ...

javascripthtmlcssinternet-explorer-8

Instead of overlapping the content, my overlay shifts the entire page downwards

I am looking to create a dynamic user experience where clicking on an image triggers a <div> overlay that darkens the background. However, instead of simply appearing over the current screen, I want the overlay to push everything else beneath it. Be ...

javascripthtmlcssoverlay

Select2 is throwing an error that says "Unidentified problem with property 'results'."

Currently, I am working on populating a searchable Select2 form-control with search results extracted from Active Directory. Let's take a look at the select2 function implementation: $("#networkUserSelect").select2({ ajax: { url: ' ...

c#jqueryjsonajaxjquery-select2

Enhancing the appearance of the CSS panel with Font Awesome icons

I need help adding a fontawesome or any other icon to my CSS3 based sliding panel button. The icon should change from open to close when clicked on. Any ideas on how to achieve this would be greatly appreciated! * { margin:0; padding:0; font-famil ...

css

Access Denied - jQuery Print Preview not authorized?

Every time I try to print using the jQuery Print Preview Plugin, an error message appears in Firebug: Error: Permission denied to access property 'name' if (window.frames[i].name == "print-frame") { I'm not sure what this error means ...

javascriptjqueryprintingprint-preview

Displaying a selection of unexpected images within a designated div container

Recently, I came across a wonderful plugin that can fetch random images and display them in a div. For more information, check out the author's page: I was wondering if it is possible to make these random images fade in? (function($){ $.random ...

jquery

Using Jquery ajax to make real-time updates to a MySQL database

In my application, I have a MySQL table called 'company' which includes columns such as companyid and activation_code. I am displaying the values from this table in an HTML table on a page named comapproval.php. Each row in the HTML table contain ...

phpjqueryhtmlmysqlajax

Bootstrap is not supporting the use of justify-content-between in cards

Incorporating Bootstrap 4, I am designing a horizontal card layout for a classified ad. My goal is to have the ad title on the left and the price on the right within the header section using a Django template: <section class="card"> ...

htmlcssbootstrap-4

Position the title of the Bootstrap selectpicker field to the right

I utilized Creative Tim's Material Dashboard Pro to create a select field. My goal is to align both the select field and its options to the right. Currently, I have only been successful in aligning the options while the title and selected option rema ...

cssselectbootstrap-4right-to-left

The presence of "label.error" appears to persist across all bootstrap tabs

I am facing an issue where the $('label.error') element appears on every bootstrap tab, even though it should only display on one specific tab. The problem arises when a field fails validation on a bootstrap tab and as a result, a label with clas ...

javascriptjquerytwitter-bootstraptabs

Building a custom navigation bar using Bootstrap

I have a vision for a navigation bar. I envision it appearing in one seamless line with the website header on larger screens, but positioned below the header on mobile devices. https://i.sstatic.net/pZFvV.png Despite my efforts, I haven't been able ...

htmlcsstwitter-bootstrapbootstrap-4navbar

`CSS border issues`

I am currently attempting to create a square consisting of 4 smaller squares inside, but I have been facing challenges with the method I was using. Here is the code snippet: #grandbox { position: absolute; width: 204px; height: 204px; border: so ...

htmlcss

What is the best way to automatically populate several textboxes with information depending on the entry in the initial textbox?

If I have a database table with 3 columns (accref, company, and contact) along with corresponding textboxes. An autosuggest feature is already implemented for the accref textbox, suggesting values from the database's accref column. What I need now is ...

phpjquerymysqlajax

I am encountering an issue with identifying a directory in Node.js

This is my HTML code <div id="done_work_1" class="logo-slide-track"> </div> <script>$.ajax({ url: "/static/home/done/", success: function (data) { $(data).find("a").attr("href&q ...

javascriptjquerynode.jsexpress

What is the best way to place two radio buttons side by side in a row?

How can I place two radio buttons in a single row with their labels, like the example shown in the picture? ...

htmlcssuser-interfacebootstrap-4

geb/selenium test, selecting multiple options

Exploring the functionality of a jQuery plugin called Chosen, I am interested in testing multiple selections. Here is the HTML code for the selection: <select id="pickUsers" name="users" multiple="true" class="many-to-many"> <option value="1"> ...

jqueryselectselenium

What causes delays in transition for 'margin' and 'padding' in webkit browsers?

I attempted to use CSS transition effects on the margin and padding properties. The goal was to create an illusion of a larger background upon hovering. To achieve this, I increased the padding and decreased the margin correspondingly on hover, ensuring t ...

cssgoogle-chromewebkitcss-transitions

Issue: NS_ERROR_FAILURE encountered in Firefox when using getBBox()

Is there a way to use the method getBBox() in SVG to retrieve the width and height of an element? I have included my code below, which works in Chrome but not in Firefox. If anyone has a solution to this issue, please let me know. try { console.log( ...

javascriptjquerysvg

Creating a dynamic and engaging full-width carousel slider using Bootstrap

I am currently utilizing the Mobirise Website Builder and am in the process of figuring out how to create a full-width Bootstrap carousel similar to the example shown at this link: My goal is to have the carousel at the top of the screen, covering only 50 ...

htmlcssbootstrap-4slidercarousel

What is preventing me from setting the height of the buttons to be the same as their width?

My website needs a panel on the left side of the screen that contains square buttons, each button representing a different action. However, currently these buttons are stretching horizontally when they should be stretched vertically to match my UI design: ...

htmlcsscss-floatheight