Transform #

Fluxo includes a range of shorthand transform utility classes to modify an element's transformation.

Rotate #

Here are some representative examples of .rotate-* classes:

.rotate-90,
.rotate-90--on-hover:hover {
  transform: rotate(90deg) !important;
}

.rotate-180,
.rotate-180--on-hover:hover {
  transform: rotate(180deg) !important;
}

.rotate-270,
.rotate-270--on-hover:hover {
  transform: rotate(270deg) !important;
}

.rotate-360,
.rotate-360--on-hover:hover {
  transform: rotate(360deg) !important;
}

Scale #

Here are some representative examples of .scale-* classes:

.scale-90 {
.scale-90--on-hover:hover{
  transform: scale(0.9) !important;
}

.scale-x-90,
.scale-x-90--on-hover:hover{
  transform: scaleX(0.9) !important;
}

.scale-y-90,
.scale-y-90--on-hover:hover{
  transform: scaleY(0.9) !important;
}

.scale-110 {
.scale-110--on-hover:hover{
transform: scale(1.1) !important;
}

.scale-x-110,
.scale-x-110--on-hover:hover{
transform: scaleX(1.1) !important;
}

.scale-y-110,
.scale-y-110--on-hover:hover{
transform: scaleY(1.1) !important;
}

Translate #

Here are some representative examples of .translate-* classes:

.translate-x-3 {
.translate-x-3--on-hover:hover{
  transform: translateX(3px) !important;
}

.translate-y-3 {
.translate-y-3--on-hover:hover{
  transform: translateY(3px) !important;
}

.translate-x-50 {
.translate-x-50--on-hover:hover{
  transform: translateX(50%) !important;
}

.translate-y-50 {
.translate-y-50--on-hover:hover{
  transform: translateY(50%) !important;
}

.translate-x-100 {
.translate-x-100--on-hover:hover{
  transform: translateX(100%) !important;
}

.translate-y-100 {
.translate-y-100--on-hover:hover{
  transform: translateY(100%) !important;
}

Negative Value #

There is also negative-value for .rotate and .translate classes above. The syntax is nearly the same as the default, positive transform utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .translate-x-n3:

.translate-x-n3 {
.translate-x-n3--on-hover:hover{
  transform: translateX(-3px) !important;
}

Deactivate Transform #

You can also deactivate any transform rules of an element by adding class .transform-none or .transform-{breakpoint}-none for xs, sm, md:

.transform-none {
  transform: none !important;
}

@media only screen and (max-width: 600px) {
  .transform-xs-none {
    transform: none !important;
  }
}