Question

我在Chrome浏览器上使用rotateX时遇到了一些问题。

有时候我会看到很好的过渡，但有时主要是在Chrome上我看到奇怪的动画发生了。

Div没有旋转但是从顶部失去高度直到它达到0然后像结束框架一样弹出 - 看起来应该在过渡结束之后。

这是我在网上遇到的许多例子的问题，但我也准备了我的问题：http://ugol.pl/test/drop1.html

你能告诉我更多关于这个问题的信息，这是某种错误还是我在CSS中做错了什么？

编辑：

Chrome: Version 31.0.1650.57 m

编辑：

<style>
#wrapper {
    width: 800px;
    height: 600px;
}
#content {
    display: block;
    width: 800px;
    height: 600px;
    border: none;
    font-size: 20px;
    color: white;
    background: rgba(0, 0, 0, 0.3);
}
.spec {
    -webkit-perspective: 800px;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective: 800px;
    -moz-transform-style: preserve-3d;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective: 800px;
    -ms-transform-style: preserve-3d;
    -ms-perspective-origin: 50% 50%;
    -o-perspective: 800px;
    -o-transform-style: preserve-3d;
    -o-perspective-origin: 50% 50%;
    perspective: 800px;
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
}
.begin {
    -webkit-transition: -webkit-transform 3s ease-in-out;
    -moz-transition: -moz-transform 3s ease-in-out;
    -ms-transition: -ms-transform 3s ease-in-out;
    -o-transition: -o-transform 3s ease-in-out;
    transition: transform 3s ease-in-out;
}
.end {
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -o-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: bottom;
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -o-transform-origin: bottom;
    transform-origin: bottom;
}
</style>
</head>
<body>
<h1>test b</h1>

<div style="width:800px;height:600px;position:relative;">
    <div id="wrapper" class="spec">
        <div id="content" class="begin">
Lorem ipsum 
        </div>
    </div>
</div>
<div id="other" style="position:relative;">
Lorem ipsum
</div>
<script>
setTimeout(function() {
    var one = document.getElementById("content");
    one.classList.add("end");
}, 3000);
</script>

Answer 1

不确定原因，但是给#wrapper transition似乎可以解决问题（对于我做过的30次左右的试验）。最简单的方法是在#wrapper

之外提供begin课程spec

<div id="wrapper" class="spec begin">

Demo

但是真的很奇怪，不确定为什么需要transition

Chrome中的CSS3过渡变换rotateX

1 个答案: