Add a flipbox effect to the superbox element

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 :

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;
    -webkit-transform: translate3d(0px, 0px, 0px);
}

.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;
    -webkit-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 :

Special Thanks to Allen Stone for the Safari fix!