Using -webkit-transform with varying transition durations for rotateX and rotateY properties

Is it possible to have different transition times for both rotateX and rotateY in CSS3? I know you can use -webkit-transition to set a time, but it seems like setting separate transition times for both is not doable. It appears that you can only set it for '-webkit-transform' itself.

<!doctype html>
<head>
  <title>CSS3 Fun</title>
  <style>

    .panel {
        float: left;
        width: 500px;
        height: 200px;
        font-size: .8em;
        background: black;
        color: white;
        text-align: center;

        -webkit-transform: rotateY(0deg) rotateX(0deg); 
        -webkit-perspective: 1000;
        -webkit-transition: -webkit-transform 1s;
        -webkit-transform-style: preserve-3d;
    }

    .panel.flip {
        -webkit-transform: rotateY(180deg) rotateX(180deg); 
    }

</style>
</head>

<body>
<div class="panel">
    CONTENT
</div>
</body>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js">       </script> -->
<script>
jQuery('.panel').toggle(function(){
    jQuery(this).addClass('flip');
},function(){
    jQuery(this).removeClass('flip');
});
</script>
</html>

Just a reminder, the above code will only function properly in webkit browsers (Chrome, Safari).

Appreciate all your assistance.

Cheers, Matthew

Answer №1

One alternative approach is to utilize CSS animations instead of transitions for a slightly different effect.

.panel.flip {
    -webkit-animation: flip-panel 1s;
    -webkit-transform: rotateY(180deg) rotateX(180deg);
}

@-webkit-keyframes flip-panel {
    from {
        -webkit-transform: rotateY(0deg) rotateX(0deg);
    }
    50% {
        -webkit-transform: rotateY(180deg) rotateX(90deg);
    }
    to {
        -webkit-transform: rotateY(180deg) rotateX(180deg);
    }
}

Remember to delete

-webkit-transition: -webkit-transform 1s;
.

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

Searching for a way to detect when a user clicks the back button on their Android or iPhone device using JavaScript or

In the process of building a Single Page Application (HTML5) utilizing the following plugins: - Sammy.js - Knockout.js - Require.js - Jquery.js This app is designed for Android, iPhone, and Windows mobile devices. Many scenarios revolve around cli ...

"Using an empty array before each statement in jQuery Ajax to handle JSON data

I have a script using jQuery that gathers data from multiple websites and then saves it into a SQL database through AJAX and PHP. Right now, the script saves each set of collected data from a site individually. I would like to modify this so that the scrip ...

When a label is clicked, the ng-change event is not triggered on the corresponding radio button

I developed a custom directive that allows you to select a radio button by focusing on its label and pressing the spacebar. However, although the radio button is checked, the ng-change function action() does not get triggered. Below is the HTML code snipp ...

Selecting HTML5 data attributes using jQuery

There is a button on my page with multiple data attributes, and I am trying to hide it by selecting it based on its class and two specific data attributes. <a href='#' class='wishlist-icon' data-wish-name='product' data-wi ...

Saving data from AJAX queries

How can I access and store variables from an ajax request that is returned from a function? While I am able to console.log the variable, I'm having difficulty saving it outside of the scope. This is how it appears: In the HTML: function my_ajax() ...

Why does changing the order of layers in Kinetic.JS affect the color of my shapes?

Currently experimenting with Kinetic.JS, I managed to create a UFO-like shape using two parts - a red hull and a grey disc. Check out the demo on JSBin My question is: why does the color of the disc change from grey to red when I rearrange the shape orde ...

Best Practices and Tips for Layout Design Using HTML and CSS Grid

As I begin my journey into front-end development, I am currently immersing myself in studying html, css, and vanilla javascript. While things are going well so far, I find myself struggling with understanding the organization of design layouts in general. ...

Issue with JSONP success function not being triggered

Here is an example of an Ajax call being made to a different domain: <script> $.ajax({ url: 'url?callback=?', dataType: 'jsonp', success: function (data) { alert(data[0].DeviceName) ...

Align content distributed evenly will not display a division

I am currently using React to code and learning by doing so. I have two different images displayed, each followed by a div element with a height of 20px and a brown background color. I have set the height to "100%" and justifyContent to "space-between", bu ...

What is preventing Safari and Firefox from properly handling audio data from MediaElementSource?

It appears that neither Safari nor Firefox can process audio data from a MediaElementSource with the Web Audio API. var audioContext, audioProcess, audioSource, response = document.createElement('h3'), display = document.createElement( ...

The issue with Fancybox not functioning properly does not display any errors in Firebug, and all the images are

Why is Fancybox not functioning on this specific page? It has worked perfectly on numerous other websites with the same code. Firebug is not showing any errors. Any thoughts on what might be causing the issue? Appreciate any insight, Bob ...

Modify the data in the <col> column

Is it feasible to update the values in a particular column of a table? <table> <col with="auto"> <col with="auto"> <col with="auto" id="update_me"> <?php for(hundreds of lines){ ?> <tr> <td>so ...

How to perfectly position various height <a> elements in a WordPress mega menu

I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines ...

It is not permitted to incorporate the navbar.html file into any other modules

As someone new to web development, I have been facing challenges while working with Django This is the code for my project's modules. {% include 'navbar.html' %} <h1>projects template</h1> <p>Lorem Ipsum is simply dummy ...

When the page loads, should the information be transmitted in JSON format or should PHP be responsible for formatting it?

I'm considering whether it would be more server-efficient and effective to send data to the user in JSON format upon page load, with JavaScript handling the conversion into readable information. For instance, when a user visits my index page, instead ...

Enlargen div or unordered list according to content exceeding limits

What is the best way to ensure a div expands when it contains a lot of content? Code Example (HTML): <div class="content"> Content goes here <br /> Content goes here <br /> Content goes here <br /> Content goes her ...

Using jQuery to create a seamless transition in font size as you scroll

Currently, I have a jQuery animation function in place to adjust the font size of the .header-wrap text when the document is scrolled beyond 50px. While this method does work, I am not completely satisfied with it as the transition is not very smooth. Idea ...

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

difficulty in obtaining information submitted through a form

I'm having an issue with my contact form. I tried testing to see if I can retrieve the values from the form, but it's giving me back: name: undefined I'm not sure why it's not working! Here is the code for the form: <form met ...

What causes the content of a sticky navbar to overflow?

I have a situation where my navbar has two styles (.navbar and .navbar_fixed), but the links in the navbar are not fitting properly. I attempted to remove padding and add left: 0;, however, these adjustments did not work as expected. Any suggestions on how ...