Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shannon Sallaway
Shannon Sallaway
2,309 Points

Jumpy or Jerky 3D Transforms

So I just finished with the 3D Transform course in the CSS deep dive and I'm having a bit of an issue. My animation isn't smooth. Rather than transitioning smoothly into place it'll move along and then jump or jerk into it's final position. I copied the code word for word from the video and have updated my browser and I still get the same results. Perhaps I'm doing something wrong, or there is an issue with my browser or system I'm unaware of. Any help would be great. Thanks.

This is the CSS for the transform. I changed the transform from what was in the video to something that better illustrates the issue I have. In theory the box should move across the browser to the right slowing increasing in size. Instead it moves to the left and then jumps to the final size of the animation: 

body {
    -webkit-perspective: 800px;
}

.wrap {
    transition: -webkit-transform 1s ease-in;
    -webkit-transform-style: preserve-3d;
}

.wrap div {
    position: absolute;
    -webkit-backface-visibility: hidden;
}

.side-a {
    z-index: 100;
}

.side-b {

}

.wrap:hover {
    -webkit-transform: scaleZ(2) translateZ(200px) translate(200px);
}

Here are the style css and html that go along with it

body {
    padding-top: 50px;
    background: #F7F7F7;
}
.wrap {
    position: relative;
    margin: 0 auto;
    width: 250px;
    height: 350px;
    cursor: pointer;
}
.wrap div {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-position: 50% 50%;
    background-size: 150px;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4);
    color: #FFF;
    text-align: center;
    text-shadow: 0 1px rgba(0,0,0,.3);
    font: bold 3em sans-serif;
    line-height: 350px;
}
.side-a {
    background: #498FBC url('img/mike.png');
}
.side-b {
    background: #33363B url('img/logo.png');
}

<!DOCTYPE html>
<html>
<head>
    <title>3D Transforms</title>
    <link rel="stylesheet" type="text/css" href="page.css">
    <link rel="stylesheet" type="text/css" href="transforms.css">
</head>
<body>
    <div class="wrap">
        <div class="side-a"></div>
        <div class="side-b"></div>
    </div>
</body>
</html>

2 Answers

Guled A.
Guled A.
10,605 Points
Guled A.
Guled A.
10,605 Points

I am not experiencing any jumpy or jerky movements during the transformation. It's running smoothly. I am unaware if network connection (consider the many online tabs open, users, and family members on your network), or latency can interfere with CSS being able to render transformations, but it can be a possibility.

Shannon Sallaway
Shannon Sallaway
2,309 Points
Shannon Sallaway
Shannon Sallaway
2,309 Points

I'm sure it could be an issue, but all of this is being done on my local system so the network isn't a part of the equation. It may still be an issue with my system rather than the markup but I can't seem to see anything that may cause it.

Guled A.
Guled A.
10,605 Points

I apologize. I tested this on an online code editor. Network issues may not be an issue in this case. There have been some cases of this. A couple searches online may help.