CODEWITHSUNDEEP
htmlcss
user1377298
user1377298

Reputation: 79

Translate shorthand

Can someone please clarify what the shorthand for translate is.

    -webkit-transform: translateY(-50%) ;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%); 
    transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);

How do I condense this?

Upvotes: 1

Views: 279

Answers (1)

sheriffderek
sheriffderek

Reputation: 9043

You just put them all in a line. (not unlike border)

border: 1px solid blue;

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

/* Multiple function values */

transform: translateX(10px) rotate(10deg) translateY(5px);

hopefully you can use autoprefixer to spit out the -prefixes-

Toss it in a CodePen and turn on autoprefixer to check it out - then look at the compiled styles.

Upvotes: 1

Related Questions