CSS Transform Cheat Sheet

[translate]

translateX

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: translateX(30px);
	}
}

translateY

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: translateY(10px);
	}
}

translate

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: translate(30px, 10px);
	}
}

[scale]

scaleX

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: scaleX(1.2);
	}
}

scaleY

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: scaleY(2);
	}
}

scale

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: scale(1.2, 2);
	}
}

[rotate]

rotateX

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotateX(180deg);
		transform:;
	}
}

rotateY

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotateY(180deg);
	}
}

rotate (=rotateZ)

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(90deg);
	}
}

rotate (turn)

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(.25turn);
	}
}

rotate3d

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate3d(1, 0, 0, 180deg);
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate3d(0, 1, 0, 180deg);
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate3d(1, 1, 0, 180deg);
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate3d(1, 1, 1, 180deg);
	}
}

[skew]

skewX

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: skewX(45deg);
	}
}

skewY

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: skewY(30deg);
	}
}

skew

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: skew(45deg, 30deg);
	}
}

[perspective]

translateZ

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: perspective(100px) translateZ(10px);
	}
}

translate3d

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: perspective(100px) translate3d(100px, 20px, 50px);
	}
}

rotateY

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: perspective(100px) rotateY(-10deg);
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: perspective(100px) rotate3d(2, -1, 0, 10deg);
	}
}

[transform-origin]

HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(10deg);
		transform-origin: top;
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(10deg);
		transform-origin: bottom;
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(4deg);
		transform-origin: left;
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(4deg);
		transform-origin: right;
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(4deg);
		transform-origin: top right;
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: perspective(100px) rotate(4deg);
		transform-origin: top right 40px;
	}
}
HOVER or TAP
.box {
	transition: 1s;
	&:hover {
		transform: rotate(10deg);
		transform-origin: 100px 50px 40px;
	}
}