Transform

For responsive

add -sm, -md, -lg or -xl to class name, for example:

<div class="ttx-50%"></div>

transform: translate

.ttx-0 {
    transform: translateX(0);
}
.ttx-100\% {
    transform: translateX(100%);
}
.ttx-50\% {
    transform: translateX(50%);
}

.-ttx-100\% {
    transform: translateX(-100%);
}
.-ttx-50\% {
    transform: translateX(-50%);
}

.tty-100\% {
    transform: translateY(100%);
}
.tty-50\% {
    transform: translateY(50%);
}

.-tty-100\% {
    transform: translateY(-100%);
}
.-tty-50\% {
    transform: translateY(-50%);
}

transform: rotate

.tr-45 {
    transform: rotate(45deg);
}
.tr-90 {
    transform: rotate(90deg);
}
.tr-180 {
    transform: rotate(180deg);
}
.-tr-45 {
    transform: rotate(45deg);
}
.-tr-90 {
    transform: rotate(90deg);
}
.-tr-180 {
    transform: rotate(180deg);
}

transform: scale

.ts1 {
    transform: scale(1.1);
}

.ts2 {
    transform: scale(1.2);
}
.ts3 {
    transform: scale(1.3);
}
.ts4 {
    transform: scale(1.4);
}
.ts5 {
    transform: scale(1.5);
}

.ts09 {
    transform: scale(0.9);
}
.ts08 {
    transform: scale(0.8);
}
.ts07 {
    transform: scale(0.7);
}
.ts06 {
    transform: scale(0.6);
}
.ts05 {
    transform: scale(0.5);
}

transform-origin

.toc {
    transform-origin: center;
}
.tot {
    transform-origin: top;
}
.totr {
    transform-origin: top right;
}
.tor {
    transform-origin: right;
}
.tobr {
    transform-origin: bottom right;
}
.tob {
    transform-origin: bottom;
}
.tobl {
    transform-origin: bottom left;
}
.tol {
    transform-origin: left;
}
.totl {
    transform-origin: top left;
}