MADE WITH BY SUPADEZIGN

Feel free to donate if you like my tutorials ;)

Add a flipbox effect to the superbox element

FLIPX

FLIPY

FLIPYR

FLIPXR

Here is how to add the popular flipbox effect. Easy and convenient as we don't have to add any files and it works directly with the Superbox element.

Step 1

Add a Superbox element.
You can of course change the content (image, text, colors...) but DO NOT add any slide effect.

Here is how it looks like :

Superbox

Step 2

Add the CSS (in a Code Block or in a Stylesheet or in a custom CSS file) :

.flipx .oxy-superbox-wrap,
.flipy .oxy-superbox-wrap,
.flipxr .oxy-superbox-wrap,
.flipyr .oxy-superbox-wrap { 
	overflow: visible; }

.flipx .oxy-superbox-primary,
.flipx .oxy-superbox-secondary,
.flipy .oxy-superbox-primary,
.flipy .oxy-superbox-secondary,
.flipxr .oxy-superbox-primary,
.flipxr .oxy-superbox-secondary,
.flipyr .oxy-superbox-primary,
.flipyr .oxy-superbox-secondary
 {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* flip x */

.flipx .oxy-superbox-primary {
    transform: perspective(1000px) rotateX(0deg);
}
.flipx .oxy-superbox-secondary {
    transform: perspective(1000px)  rotateX(180deg);
}
.flipx .oxy-superbox-wrap:hover .oxy-superbox-primary {
    transform: perspective(1000px)  rotateX(-180deg);
}
.flipx .oxy-superbox-wrap:hover .oxy-superbox-secondary {
    transform: perspective(1000px) rotateX(0deg);
}

/* flip y */

.flipy .oxy-superbox-primary {
    transform: perspective(1000px) rotateY(0deg);
}
.flipy .oxy-superbox-secondary {
    transform: perspective(1000px)  rotateY(180deg);
}
.flipy .oxy-superbox-wrap:hover .oxy-superbox-primary {
    transform: perspective(1000px)  rotateY(-180deg);
}
.flipy .oxy-superbox-wrap:hover .oxy-superbox-secondary {
    transform: perspective(1000px) rotateY(0deg);
}

/* flip x reverse */

.flipxr .oxy-superbox-primary {
    transform: perspective(1000px) rotateX(0deg);
}
.flipxr .oxy-superbox-secondary {
    transform: perspective(1000px)  rotateX(-180deg);
}
.flipxr .oxy-superbox-wrap:hover .oxy-superbox-primary {
    transform: perspective(1000px)  rotateX(180deg);
}
.flipxr .oxy-superbox-wrap:hover .oxy-superbox-secondary {
    transform: perspective(1000px) rotateX(0deg);
}

/* flip y reverse */

.flipyr .oxy-superbox-primary {
    transform: perspective(1000px) rotateY(0deg);
}
.flipyr .oxy-superbox-secondary {
    transform: perspective(1000px)  rotateY(-180deg);
}
.flipyr .oxy-superbox-wrap:hover .oxy-superbox-primary {
    transform: perspective(1000px)  rotateY(180deg);
}
.flipyr .oxy-superbox-wrap:hover .oxy-superbox-secondary {
    transform: perspective(1000px) rotateY(0deg);
}

Step 3

Add one of these classes to the Superbox element :

  • flipx
  • flipxr
  • flipy
  • flipyr

The default speed for the animation (transition) is 0.5s

If you want to make it faster or slower, you can simply change it in the Animation Speed setting :