CODEWITHSUNDEEP
cssgoogle-chromerotationtranslationtransform
user3008543
user3008543

Reputation: 163

CSS3 transition transform rotateX in Chrome

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

Answers (1)

Zach Saucier
Zach Saucier

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

Demo

Really weird error though, not sure why a transition would necessary

Upvotes: 1

Related Questions