Возможно ли для rotateX и rotateY в CSS3 разное время перехода. Я понимаю, что вы используете -webkit-transition для установки времени, но, как вы можете видеть ниже, кажется невозможным установить разные времена перехода для обоих. Вы можете установить его только для -webkit-transform.
<!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>
Примечание. Возможно, указывается очевидное, но приведенное выше работает только в браузерах Webkit (Chrome, Safari).
Спасибо за вашу помощь.
Ура, Мэтью