Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
tr:0translate: 0 0;tr:1translate: .25rem .25rem;tr:2translate: .5rem .5rem;tr:3translate: .75rem .75rem;tr:4translate: 1rem 1rem;tr:5translate: 1.25rem 1.25rem;tr:6translate: 1.5rem 1.5rem;tr:7translate: 1.75rem 1.75rem;tr:8translate: 2rem 2rem;tr:9translate: 2.25rem 2.25rem;tr:10translate: 2.5rem 2.5rem;tr:11translate: 2.75rem 2.75rem;tr:12translate: 3rem 3rem;tr:13translate: 3.25rem 3.25rem;tr:14translate: 3.5rem 3.5rem;tr:15translate: 3.75rem 3.75rem;tr:16translate: 4rem 4rem;tr:17translate: 4.25rem 4.25rem;tr:18translate: 4.5rem 4.5rem;tr:19translate: 4.75rem 4.75rem;tr:20translate: 5rem 5rem;tr:21translate: 5.25rem 5.25rem;tr:22translate: 5.5rem 5.5rem;tr:23translate: 5.75rem 5.75rem;tr:24translate: 6rem 6rem;tr:25translate: 6.25rem 6.25rem;tr:26translate: 6.5rem 6.5rem;tr:27translate: 6.75rem 6.75rem;tr:28translate: 7rem 7rem;tr:29translate: 7.25rem 7.25rem;tr:30translate: 7.5rem 7.5rem;tr:31translate: 7.75rem 7.75rem;tr:32translate: 8rem 8rem;tr:33translate: 8.25rem 8.25rem;tr:34translate: 8.5rem 8.5rem;tr:35translate: 8.75rem 8.75rem;tr:36translate: 9rem 9rem;tr:37translate: 9.25rem 9.25rem;tr:38translate: 9.5rem 9.5rem;tr:39translate: 9.75rem 9.75rem;tr:40translate: 10rem 10rem;tr:41translate: 10.25rem 10.25rem;tr:42translate: 10.5rem 10.5rem;tr:43translate: 10.75rem 10.75rem;tr:44translate: 11rem 11rem;tr:45translate: 11.25rem 11.25rem;tr:46translate: 11.5rem 11.5rem;tr:47translate: 11.75rem 11.75rem;tr:48translate: 12rem 12rem;tr:49translate: 12.25rem 12.25rem;tr:50translate: 12.5rem 12.5rem;tr:51translate: 12.75rem 12.75rem;tr:52translate: 13rem 13rem;tr:53translate: 13.25rem 13.25rem;tr:54translate: 13.5rem 13.5rem;tr:55translate: 13.75rem 13.75rem;tr:56translate: 14rem 14rem;tr:57translate: 14.25rem 14.25rem;tr:58translate: 14.5rem 14.5rem;tr:59translate: 14.75rem 14.75rem;tr:60translate: 15rem 15rem;tr:61translate: 15.25rem 15.25rem;tr:62translate: 15.5rem 15.5rem;tr:63translate: 15.75rem 15.75rem;tr:64translate: 16rem 16rem;tr:65translate: 16.25rem 16.25rem;tr:66translate: 16.5rem 16.5rem;tr:67translate: 16.75rem 16.75rem;tr:68translate: 17rem 17rem;tr:69translate: 17.25rem 17.25rem;tr:70translate: 17.5rem 17.5rem;tr:71translate: 17.75rem 17.75rem;tr:72translate: 18rem 18rem;tr:73translate: 18.25rem 18.25rem;tr:74translate: 18.5rem 18.5rem;tr:75translate: 18.75rem 18.75rem;tr:76translate: 19rem 19rem;tr:77translate: 19.25rem 19.25rem;tr:78translate: 19.5rem 19.5rem;tr:79translate: 19.75rem 19.75rem;tr:80translate: 20rem 20rem;tr:81translate: 20.25rem 20.25rem;tr:82translate: 20.5rem 20.5rem;tr:83translate: 20.75rem 20.75rem;tr:84translate: 21rem 21rem;tr:85translate: 21.25rem 21.25rem;tr:86translate: 21.5rem 21.5rem;tr:87translate: 21.75rem 21.75rem;tr:88translate: 22rem 22rem;tr:89translate: 22.25rem 22.25rem;tr:90translate: 22.5rem 22.5rem;tr:91translate: 22.75rem 22.75rem;tr:92translate: 23rem 23rem;tr:93translate: 23.25rem 23.25rem;tr:94translate: 23.5rem 23.5rem;tr:95translate: 23.75rem 23.75rem;tr:96translate: 24rem 24rem;tr:97translate: 24.25rem 24.25rem;tr:98translate: 24.5rem 24.5rem;tr:99translate: 24.75rem 24.75rem;tr:100translate: 25rem 25rem;tr:fulltranslate: 100% 100%;tr:halftranslate: 50% 50%;Translate X
ttx:0transform: translateX(0);ttx:1transform: translateX(.25rem);ttx:2transform: translateX(.5rem);ttx:3transform: translateX(.75rem);ttx:4transform: translateX(1rem);ttx:5transform: translateX(1.25rem);ttx:6transform: translateX(1.5rem);ttx:7transform: translateX(1.75rem);ttx:8transform: translateX(2rem);ttx:9transform: translateX(2.25rem);ttx:10transform: translateX(2.5rem);ttx:11transform: translateX(2.75rem);ttx:12transform: translateX(3rem);ttx:13transform: translateX(3.25rem);ttx:14transform: translateX(3.5rem);ttx:15transform: translateX(3.75rem);ttx:16transform: translateX(4rem);ttx:17transform: translateX(4.25rem);ttx:18transform: translateX(4.5rem);ttx:19transform: translateX(4.75rem);ttx:20transform: translateX(5rem);ttx:21transform: translateX(5.25rem);ttx:22transform: translateX(5.5rem);ttx:23transform: translateX(5.75rem);ttx:24transform: translateX(6rem);ttx:25transform: translateX(6.25rem);ttx:26transform: translateX(6.5rem);ttx:27transform: translateX(6.75rem);ttx:28transform: translateX(7rem);ttx:29transform: translateX(7.25rem);ttx:30transform: translateX(7.5rem);ttx:31transform: translateX(7.75rem);ttx:32transform: translateX(8rem);ttx:33transform: translateX(8.25rem);ttx:34transform: translateX(8.5rem);ttx:35transform: translateX(8.75rem);ttx:36transform: translateX(9rem);ttx:37transform: translateX(9.25rem);ttx:38transform: translateX(9.5rem);ttx:39transform: translateX(9.75rem);ttx:40transform: translateX(10rem);ttx:41transform: translateX(10.25rem);ttx:42transform: translateX(10.5rem);ttx:43transform: translateX(10.75rem);ttx:44transform: translateX(11rem);ttx:45transform: translateX(11.25rem);ttx:46transform: translateX(11.5rem);ttx:47transform: translateX(11.75rem);ttx:48transform: translateX(12rem);ttx:49transform: translateX(12.25rem);ttx:50transform: translateX(12.5rem);ttx:51transform: translateX(12.75rem);ttx:52transform: translateX(13rem);ttx:53transform: translateX(13.25rem);ttx:54transform: translateX(13.5rem);ttx:55transform: translateX(13.75rem);ttx:56transform: translateX(14rem);ttx:57transform: translateX(14.25rem);ttx:58transform: translateX(14.5rem);ttx:59transform: translateX(14.75rem);ttx:60transform: translateX(15rem);ttx:61transform: translateX(15.25rem);ttx:62transform: translateX(15.5rem);ttx:63transform: translateX(15.75rem);ttx:64transform: translateX(16rem);ttx:65transform: translateX(16.25rem);ttx:66transform: translateX(16.5rem);ttx:67transform: translateX(16.75rem);ttx:68transform: translateX(17rem);ttx:69transform: translateX(17.25rem);ttx:70transform: translateX(17.5rem);ttx:71transform: translateX(17.75rem);ttx:72transform: translateX(18rem);ttx:73transform: translateX(18.25rem);ttx:74transform: translateX(18.5rem);ttx:75transform: translateX(18.75rem);ttx:76transform: translateX(19rem);ttx:77transform: translateX(19.25rem);ttx:78transform: translateX(19.5rem);ttx:79transform: translateX(19.75rem);ttx:80transform: translateX(20rem);ttx:81transform: translateX(20.25rem);ttx:82transform: translateX(20.5rem);ttx:83transform: translateX(20.75rem);ttx:84transform: translateX(21rem);ttx:85transform: translateX(21.25rem);ttx:86transform: translateX(21.5rem);ttx:87transform: translateX(21.75rem);ttx:88transform: translateX(22rem);ttx:89transform: translateX(22.25rem);ttx:90transform: translateX(22.5rem);ttx:91transform: translateX(22.75rem);ttx:92transform: translateX(23rem);ttx:93transform: translateX(23.25rem);ttx:94transform: translateX(23.5rem);ttx:95transform: translateX(23.75rem);ttx:96transform: translateX(24rem);ttx:97transform: translateX(24.25rem);ttx:98transform: translateX(24.5rem);ttx:99transform: translateX(24.75rem);ttx:100transform: translateX(25rem);ttx:fulltransform: translateX(100%);ttx:halftransform: translateX(50%);Translate Y
tty:0transform: translateY(0);tty:1transform: translateY(.25rem);tty:2transform: translateY(.5rem);tty:3transform: translateY(.75rem);tty:4transform: translateY(1rem);tty:5transform: translateY(1.25rem);tty:6transform: translateY(1.5rem);tty:7transform: translateY(1.75rem);tty:8transform: translateY(2rem);tty:9transform: translateY(2.25rem);tty:10transform: translateY(2.5rem);tty:11transform: translateY(2.75rem);tty:12transform: translateY(3rem);tty:13transform: translateY(3.25rem);tty:14transform: translateY(3.5rem);tty:15transform: translateY(3.75rem);tty:16transform: translateY(4rem);tty:17transform: translateY(4.25rem);tty:18transform: translateY(4.5rem);tty:19transform: translateY(4.75rem);tty:20transform: translateY(5rem);tty:21transform: translateY(5.25rem);tty:22transform: translateY(5.5rem);tty:23transform: translateY(5.75rem);tty:24transform: translateY(6rem);tty:25transform: translateY(6.25rem);tty:26transform: translateY(6.5rem);tty:27transform: translateY(6.75rem);tty:28transform: translateY(7rem);tty:29transform: translateY(7.25rem);tty:30transform: translateY(7.5rem);tty:31transform: translateY(7.75rem);tty:32transform: translateY(8rem);tty:33transform: translateY(8.25rem);tty:34transform: translateY(8.5rem);tty:35transform: translateY(8.75rem);tty:36transform: translateY(9rem);tty:37transform: translateY(9.25rem);tty:38transform: translateY(9.5rem);tty:39transform: translateY(9.75rem);tty:40transform: translateY(10rem);tty:41transform: translateY(10.25rem);tty:42transform: translateY(10.5rem);tty:43transform: translateY(10.75rem);tty:44transform: translateY(11rem);tty:45transform: translateY(11.25rem);tty:46transform: translateY(11.5rem);tty:47transform: translateY(11.75rem);tty:48transform: translateY(12rem);tty:49transform: translateY(12.25rem);tty:50transform: translateY(12.5rem);tty:51transform: translateY(12.75rem);tty:52transform: translateY(13rem);tty:53transform: translateY(13.25rem);tty:54transform: translateY(13.5rem);tty:55transform: translateY(13.75rem);tty:56transform: translateY(14rem);tty:57transform: translateY(14.25rem);tty:58transform: translateY(14.5rem);tty:59transform: translateY(14.75rem);tty:60transform: translateY(15rem);tty:61transform: translateY(15.25rem);tty:62transform: translateY(15.5rem);tty:63transform: translateY(15.75rem);tty:64transform: translateY(16rem);tty:65transform: translateY(16.25rem);tty:66transform: translateY(16.5rem);tty:67transform: translateY(16.75rem);tty:68transform: translateY(17rem);tty:69transform: translateY(17.25rem);tty:70transform: translateY(17.5rem);tty:71transform: translateY(17.75rem);tty:72transform: translateY(18rem);tty:73transform: translateY(18.25rem);tty:74transform: translateY(18.5rem);tty:75transform: translateY(18.75rem);tty:76transform: translateY(19rem);tty:77transform: translateY(19.25rem);tty:78transform: translateY(19.5rem);tty:79transform: translateY(19.75rem);tty:80transform: translateY(20rem);tty:81transform: translateY(20.25rem);tty:82transform: translateY(20.5rem);tty:83transform: translateY(20.75rem);tty:84transform: translateY(21rem);tty:85transform: translateY(21.25rem);tty:86transform: translateY(21.5rem);tty:87transform: translateY(21.75rem);tty:88transform: translateY(22rem);tty:89transform: translateY(22.25rem);tty:90transform: translateY(22.5rem);tty:91transform: translateY(22.75rem);tty:92transform: translateY(23rem);tty:93transform: translateY(23.25rem);tty:94transform: translateY(23.5rem);tty:95transform: translateY(23.75rem);tty:96transform: translateY(24rem);tty:97transform: translateY(24.25rem);tty:98transform: translateY(24.5rem);tty:99transform: translateY(24.75rem);tty:100transform: translateY(25rem);tty:fulltransform: translateY(100%);tty:halftransform: translateY(50%);Media Queries
Prefix a class with a breakpoint to apply it from that width up.
Pseudo Classes
Prefix a class with a state to apply it only while that state matches.
Negative Values
Double the hyphen to negate any value on the scale.