Home/ Questions/Q 6132239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T17:04:38+00:00

Is it possible for both rotateX and rotateY in CSS3 to have different transition

  • 0

Is it possible for both rotateX and rotateY in CSS3 to have different transition times. I realise that you use -webkit-transition to set a time but, as you can see below, it seems impossible to set different transition times for both. 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>

Note: Probably stating the obvious, but the above will only work in webkit browsers (Chrome, Safari).

Thanks for all your help.

Cheers, Matthew

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not as elegant, but you can use CSS animations rather than transitions.

    .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);
    }
}

    Don’t forget to remove -webkit-transition: -webkit-transform 1s;.

    • 0