Question

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

感谢您的帮助。

干杯，马修

Answer 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;。

-webkit-transform具有rotateX和rotateY的不同转换时间

1 个答案: