elementor4fun-logo
Last update: March 22, 2020

Add a Cubebox effect to the Superbox element

MORE INFO
JUST A 3D CUBE
MADE WITH THE SUPERBOX ELEMENT

Just like the Flipbox effect, we will use the Superbox element with some custom CSS.

So we are going to make a 3D CUBE (it looks like a cube but there are only 2 faces).
There will be 4 versions: A rotation from the right, from the left, from the top and from the bottom.

Create the Cube

Step 1

Add a Superbox element and add the class .cubebox-right

Step 2

Important, we have to set up a width and a height, because we need them later for the CSS.

It's also better if you remove the default opacity settings for the Secondary:

Step 3

Here is finally the CSS.
Don't add it now as we have a better version coming up.
It's just more readable if you want to understand how it works.

.oxy-superbox.cubebox-right {
    perspective: 700px;
}

.oxy-superbox.cubebox-right .oxy-superbox-wrap {
    transition: 0.5s ease transform;
    transform-style: preserve-3d;
    overflow: visible;
    transform: translateZ(-250px);
}

.oxy-superbox.cubebox-right .oxy-superbox-primary {
    transform: rotateY(0deg) translateZ(250px);
}

.oxy-superbox.cubebox-right .oxy-superbox-secondary {
    transform: rotateY(90deg) translateZ(250px);
}

.oxy-superbox.cubebox-right:hover .oxy-superbox-wrap {
    transform: translateZ(-250px) rotateY(-90deg);
}

As you can see, we have 4 translations (translateZ) with a value of 250px or -250px.
It's actually the width of the superbox divided by 2.

CSS Variables

To make it easier and faster to edit, we will use some CSS variables. So we only need to change one variable instead of 4 translateZ.
So now, if your superbox has a width of 700px, you just need to change the --cuberight-size variable to 700px.

Copy this CSS in a Stylesheet, not in a Code Block.

:root {
    --cuberight-size: 500px; /* width of the superbox */
    --cuberight-half: calc(var(--cuberight-size) / 2);
    --cuberight-inv: calc(var(--cuberight-half) * -1);
}

.oxy-superbox.cubebox-right {
    perspective: 700px;
}

.oxy-superbox.cubebox-right .oxy-superbox-wrap {
    transition: 0.5s ease transform;
    transform-style: preserve-3d;
    overflow: visible;
    transform: translateZ(var(--cuberight-inv));
}

.oxy-superbox.cubebox-right .oxy-superbox-primary {
    transform: rotateY(0deg) translateZ(var(--cuberight-half));
}

.oxy-superbox.cubebox-right .oxy-superbox-secondary {
    transform: rotateY(90deg) translateZ(var(--cuberight-half));
}

.oxy-superbox.cubebox-right:hover .oxy-superbox-wrap {
    transform: translateZ(var(--cuberight-inv)) rotateY(-90deg);
}

How to make it responsive

Step 1

Select the different breakpoints and change the width according to your need.

Step 2

Add the corresponding media-queries, and change only the CSS variable:

@media (max-width: 767px) {
:root {
    --cuberight-size: 400px; /* width of the superbox */
}
}
@media (max-width: 479px) {
:root {
    --cuberight-size: 250px; /* width of the superbox */
}
}

How about the other sides?

From the left

MORE INFO
JUST A 3D CUBE
MADE WITH THE SUPERBOX ELEMENT

Here is the full CSS for the .cubebox-left class. Included the media-queries.
You may adjust the --cubeleft-size CSS variable and the media-queries according to your need.

:root {
    --cubeleft-size: 500px; /* width of the superbox */
    --cubeleft-half: calc(var(--cubeleft-size) / 2);
    --cubeleft-inv: calc(var(--cubeleft-half) * -1);
}

.oxy-superbox.cubebox-left {
    perspective: 700px;
}

.oxy-superbox.cubebox-left .oxy-superbox-wrap {
    transition: 0.5s ease all;
    transform-style: preserve-3d;
    overflow: visible;
    transform: translateZ(var(--cubeleft-inv));
}

.oxy-superbox.cubebox-left .oxy-superbox-wrap .oxy-superbox-primary {
    transform: rotateY(0deg) translateZ(var(--cubeleft-half));
}

.oxy-superbox.cubebox-left .oxy-superbox-wrap .oxy-superbox-secondary {
    transform: rotateY(-90deg) translateZ(var(--cubeleft-half));
}

.oxy-superbox.cubebox-left:hover .oxy-superbox-wrap {
    transform: translateZ(var(--cubeleft-inv)) rotateY(90deg);
}

@media (max-width: 767px) {
:root {
    --cubeleft-size: 400px; /* width of the superbox */
}
}
@media (max-width: 479px) {
:root {
    --cubeleft-size: 250px; /* width of the superbox */
}
}

From the top

MORE INFO
JUST A 3D CUBE
MADE WITH THE SUPERBOX ELEMENT

Here is the full CSS for the .cubebox-top class. NO MEDIA QUERIES NEEDED!
It's vertical, we don't need the width, but the height of the superbox

:root {
    --cubetop-size: 300px; /* height of the superbox */
    --cubetop-half: calc(var(--cubetop-size) / 2);
    --cubetop-inv: calc(var(--cubetop-half) * -1);
}

.oxy-superbox.cubebox-top {
    perspective: 700px;
}

.oxy-superbox.cubebox-top .oxy-superbox-wrap {
    transition: 0.5s ease all;
    transform-style: preserve-3d;
    overflow: visible;
	transform: translateZ(var(--cubetop-inv));
}

.oxy-superbox.cubebox-top .oxy-superbox-wrap .oxy-superbox-primary {
	transform: rotateY(0deg) translateZ(var(--cubetop-half));
}

.oxy-superbox.cubebox-top .oxy-superbox-wrap .oxy-superbox-secondary {
	transform: rotateX(90deg) translateZ(var(--cubetop-half));
}

.oxy-superbox.cubebox-top:hover .oxy-superbox-wrap {
	transform: translateZ(var(--cubetop-inv)) rotateX(-90deg);
}

From the bottom

MORE INFO
JUST A 3D CUBE
MADE WITH THE SUPERBOX ELEMENT

Here is the full CSS for the .cubebox-bottom class. NO MEDIA QUERIES NEEDED!
It's vertical, we don't need the width, but the height of the superbox

:root {
    --cubebottom-size: 300px; /* height of the superbox */
    --cubebottom-half: calc(var(--cubebottom-size) / 2);
    --cubebottom-inv: calc(var(--cubebottom-half) * -1);
}

.oxy-superbox.cubebox-bottom {
    perspective: 700px;
}

.oxy-superbox.cubebox-bottom .oxy-superbox-wrap {
    transition: 0.5s ease all;
    transform-style: preserve-3d;
    overflow: visible;
    transform: translateZ(var(--cubebottom-inv));
}

.oxy-superbox.cubebox-bottom .oxy-superbox-wrap .oxy-superbox-primary {
    transform: rotateY(0deg) translateZ(var(--cubebottom-half));
}

.oxy-superbox.cubebox-bottom .oxy-superbox-wrap .oxy-superbox-secondary {
    transform: rotateX(-90deg) translateZ(var(--cubebottom-half));
}

.oxy-superbox.cubebox-bottom:hover .oxy-superbox-wrap {
    transform: translateZ(var(--cubebottom-inv)) rotateX(90deg);
}

Bonus part : Adding a shadow

Let's get crazy, how about adding a fake shadow ?
Here is the CSS to add to the cubebox-right class.

You can adjust the translateZ and scale transformations for the distance and the size

.oxy-superbox.cubebox-right .oxy-superbox-wrap:after {
    content: "";
    position: absolute;
    background: rgba(0, 0, 0, 0.15);
    height: var(--cuberight-size);
    width: var(--cuberight-size);
    transform: rotateX(-90deg) translateZ(150px) scale(.95);
    z-index: -2
}

Unlimited Elements

The 4 effects are also available in my design set Unlimited Elements.
So you can import them easily ;)

Reference: https://3dtransforms.desandro.com/cube

closealign-justifychevron-downcaret-up