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
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
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
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