Interaction
Interactive 3D Globe Image Grid
This is an interactive 3D image globe image grid in Framer, recreated from Michal Zalobny’s portfolio. In this recreation, I used my 3D look component, which can turn any element into an interactive 3D object. Feel free to remix the project and see how the whole interaction comes together.
About the resource
To create the 3D globe image grid, I started by making multiple arms, each containing image layers. I applied 3D transforms to each image and rotated them along the x-axis with values 90° and -90°.
Next, I arranged the arms in a stack and rotated the entire stack along the y-axis (angles 90°, -45°, 135°) to form the spherical shape. Additionally, I rotated individual arms along the x-axis at angles -45°, -90°, -135°. By combining these rotations with the right structure, the images formed a complete 3D globe.
About the resource
To create the 3D globe image grid, I started by making multiple arms, each containing image layers. I applied 3D transforms to each image and rotated them along the x-axis with values 90° and -90°.
Next, I arranged the arms in a stack and rotated the entire stack along the y-axis (angles 90°, -45°, 135°) to form the spherical shape. Additionally, I rotated individual arms along the x-axis at angles -45°, -90°, -135°. By combining these rotations with the right structure, the images formed a complete 3D globe.
About the resource
To create the 3D globe image grid, I started by making multiple arms, each containing image layers. I applied 3D transforms to each image and rotated them along the x-axis with values 90° and -90°.
Next, I arranged the arms in a stack and rotated the entire stack along the y-axis (angles 90°, -45°, 135°) to form the spherical shape. Additionally, I rotated individual arms along the x-axis at angles -45°, -90°, -135°. By combining these rotations with the right structure, the images formed a complete 3D globe.
The 3D globe image grid crafted using 3D transforms.
The 3D globe image grid crafted using 3D transforms.
The 3D globe image grid crafted using 3D transforms.
Once the images are arranged in a 3D globe, I connect this frame to the 3D look component and enabled perspective and dragging interaction.
Once the images are arranged in a 3D globe, I connect this frame to the 3D look component and enabled perspective and dragging interaction.
Once the images are arranged in a 3D globe, I connect this frame to the 3D look component and enabled perspective and dragging interaction.
The 3D look component properties in Framer.
The 3D look component properties in Framer.
The 3D look component properties in Framer.
