CSS3 中的 rotateX 和 rotateY 是否可以有不同的过渡时间。我知道您使用 -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)。
感谢您的帮助。
干杯，马修
最佳答案
它不是那么优雅，但您可以使用 CSS 动画而不是过渡。
.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);
}
}
不要忘记删除 -webkit-transition: -webkit-transform 1s;。
关于jquery - -webkit-transform 对 rotateX 和 rotateY 有不同的转换时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6639687/