Helpful CSS Classes for Flipping and Rotating Elements

Useful CSS transformation classes for use with Content Security Policy (CSP).

/* Flip Horizontal */
.flip-h {
	transform: scaleX(-1);
}
/* Flip Vertical */
.flip-v {
	transform: scaleY(-1);
}
/* Rotation */
.rotate-0, .rotate-360 {
	transform: rotate(0deg);
}
.rotate-45 {
	transform: rotate(45deg);
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-135 {
	transform: rotate(135deg);
}
.rotate-180 {
	transform: rotate(180deg);
}
.rotate-225 {
	transform: rotate(225deg);
}
.rotate-270 {
	transform: rotate(270deg);
}
.rotate-315 {
	transform: rotate(315deg);
}

Combining flip and rotate classes can achieve most desired display transformations.

Leave a Reply

Your email address will not be published. Required fields are marked *