Reputation: 163
I have some problem with rotateX on Chrome browser.
Sometimes I see nice transition, but sometimes mostly on Chrome I see weird animation happen.
Div is not rotated but loosing height from the top until it reaches 0 and then like end frame pops up - to look as it should after transition ends.
This is the problem I've experienced with many examples around the net, but I also prepared mine: http://ugol.pl/test/drop1.html
Can you tell me more about this issue, is this some kind of bug or did I do something wrong inside my 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>
Upvotes: 1
Views: 909
Reputation: 26034
Not sure why, but giving #wrapper
a transition
seemed to fix the problem (for the 30 or so trials that I did). The easiest way to apply it would be to give #wrapper
the class begin
in addition to spec
<div id="wrapper" class="spec begin">
Really weird error though, not sure why a transition
would necessary
Upvotes: 1