CSS3 переход преобразования rotateX в Chrome

У меня есть проблема с rotateX в браузере Chrome.CSS3 переход преобразования rotateX в Chrome

Иногда я вижу приятный переход, но иногда в основном в Chrome я вижу странную анимацию.

Div не повернут, но потеряет высоту от вершины до тех пор, пока не достигнет 0, а затем, как и конечная рамка, всплывает - чтобы выглядеть так, как следует после завершения перехода.

Это проблема, я испытал с большим количеством примеров вокруг сети, но я также подготовил мое: http://ugol.pl/test/drop1.html

Можете ли вы сказать мне больше об этой проблеме, это какая-то ошибка или я сделал что-то неправильно внутри моего CSS?

EDIT:

Chrome: Version 31.0.1650.57 m

EDIT:

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

источник

2013-11-19 user3008543

ур хромированную версию? – nik

Версия 31.0.1650.57 m – user3008543

Я смог увидеть проблему, используя ту же версию Chrome. Это случилось 2/8 раз, когда я пытался. Для меня в этих двух случаях он, казалось, вращался мимо обычной степени во время перехода (ускорялся из-за увеличенной степени), а затем возвращался к обычной концевой кадре. @ user3008543 Можете ли вы разместить код или, возможно, jsFiddle? –

Не знаю, почему, но давая #wrappertransition, казалось, решить эту проблему (для 30 или около того испытания, что я сделал). Самый простой способ, чтобы применить его было бы дать #wrapper класс begin в дополнение к spec

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

Demo

Действительно странные ошибки, хотя, не знаю, почему transition бы необходимую

источник

2013-11-19 16:53:17

CSS3 переход преобразования rotateX в Chrome

ответ

Смежные вопросы