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