Copy component
Copy component
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
Component
This is a 3D cube animation recreated in Framer from Reijo’s original work. It’s made with simple 3D transforms and rotates in a seamless infinite loop, all without code. You can remix it or copy the component directly into your projects to add a playful animated touch.
Created by
To create this 3D cube animation in Framer, I first built the cube using 3D transforms, applying perspective and enabling preserve-3D both on the parent container and on each side so the faces rendered properly in space. I then rotated the cube along the x, y, and z axes to set the starting angle for the animation. Each side of the cube was styled with gradient fills and decorated with icons to match the design. For the animation, I added a loop effect to the cube and applied a full –360° rotation on the x-axis with a linear transition, resulting in a smooth, seamless looping motion.
To create this 3D cube animation in Framer, I first built the cube using 3D transforms, applying perspective and enabling preserve-3D both on the parent container and on each side so the faces rendered properly in space. I then rotated the cube along the x, y, and z axes to set the starting angle for the animation. Each side of the cube was styled with gradient fills and decorated with icons to match the design. For the animation, I added a loop effect to the cube and applied a full –360° rotation on the x-axis with a linear transition, resulting in a smooth, seamless looping motion.
To create this 3D cube animation in Framer, I first built the cube using 3D transforms, applying perspective and enabling preserve-3D both on the parent container and on each side so the faces rendered properly in space. I then rotated the cube along the x, y, and z axes to set the starting angle for the animation. Each side of the cube was styled with gradient fills and decorated with icons to match the design. For the animation, I added a loop effect to the cube and applied a full –360° rotation on the x-axis with a linear transition, resulting in a smooth, seamless looping motion.
The 3D cube using 3D transforms in Framer.
The 3D cube using 3D transforms in Framer.
The 3D cube using 3D transforms in Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
