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 Alexandros S.
Alexandros S.
8,261 Points

translate3d() values

Guil used this piece of code in this video and I dont understand what the third value of "translate3d()" does. Can someone please tell me.

@keyframes slide {
    50% {
        transform: translate3d(0,-10px,0);
    }
    80% {
        transform: translate3d(0,10px,0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
} 
```css

3 Answers

Stephan L
Stephan L
17,821 Points

The documentation can answer this: (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d)

The third value is for the z-axis- where the element should move in "3D" space.

Alexandros S.
Alexandros S.
8,261 Points

I was looking for this page but coudn't find it. Thanks!

Alexander Peschel
seal-mask
.a{fill-rule:evenodd;}techdegree
Alexander Peschel
Front End Web Development Techdegree Student 11,181 Points
Alexander Peschel
.a{fill-rule:evenodd;}techdegree
Alexander Peschel
Front End Web Development Techdegree Student 11,181 Points

The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.

The first value is the x-axis, the second value is the y-axis and the last value is the z-axis.

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: Each argument of translate3d represent a direction in 3-D space.

The first argument represents "x", or left-right displacement.

The second argument represents "y", or up-down displacement.

The third argument represents "z", or front-back displacement. Since the object cannot actually move closer or farther away, the visual effect is much like a scale transform, making the object larger or smaller. For this effect to be noticeable, a perspective must also be applied, which will determine how much of a change will be seen per unit of movement.

In this example set of keyframes, since only the second argument value changes, the object will move up and down. Neither the "x" or "z" axis is being affected here.