-webkit-transform，rotateX 和 rotateY 的转换时间不同答案

【问题标题】：-webkit-transform with different transition times for rotateX and rotateY-webkit-transform，rotateX 和 rotateY 的转换时间不同
【发布时间】：2011-10-02 03:40:12
【问题描述】：

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）。

感谢您的所有帮助。

干杯，马修

【问题讨论】：

标签： jquery html css webkit

【解决方案1】：

它没有那么优雅，但您可以使用 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;。

【讨论】：