About the animation demo, are there any reason using translate3d?
CSS Variables vs. Preprocessor Variables

Question

About the animation demo, are there any reason using translate3d? Can I use translate(), as the z value is 0 all the time?
@keyframes bounce{
            50% {transform: translate3d(0, 80vh, 0);}
        }
        @keyframes slide{
            50% {transform: translate3d(80vw, 0, 0);}
        }
        @keyframes diag{
            50% {transform: translate3d(80vw, 80vh, 0);}
        }
INstead, using
@keyframes bounce{
            50% {transform: translate(0, 80vh);}
        }
        @keyframes slide{
            50% {transform: translate(80vw, 0);}
        }
        @keyframes diag{
            50% {transform: translate(80vw, 80vh);}
        }

Steven Parker · Answer

You're quite right that without an z-axis changes, translate3d and translate are interchangeable.
You didn't link to the course page, but I would guess that this particular demo might be to simply introduce the parameter and there might be more to follow that will demonstrate the 3-D effects.

Welcome to the Treehouse Community

Looking to learn something new?

Jonah Shi

Jonah Shi

About the animation demo, are there any reason using translate3d? CSS Variables vs. Preprocessor Variables

1 Answer

Steven Parker

Steven Parker