1- Install the Plugin: Go to the Plugins section in your Bubble.io application, search for the Card Hover Effects 3D plugin, and click Install to add it to your project.
2- Enable the ID Attribute Option: Before using the plugin, make sure to enable ID attributes for the elements you want to animate. Go to the General Settings section in the editor, find the Additional Options option, and check the box titled Expose ID Attribute. This will allow you to assign and use ID attributes on the elements to be animated. (https://forum.bubble.io/t/how-do-you-enable-an-id-attribute-to-a-input-box-or-any-item/112195)

3- Drag a Group from the layout editor and place it on your page. Assign a unique ID attribute to the group, for example: card_element_id. This will be the main element that will be animated. If you want to apply the optional effect to an image within the group, drag an image into the group and assign a unique ID attribute, such as image_id.

4- Configure the Plugin Settings: Once the plugin is installed, go to the plugin properties panel under the Plugins tab and fill in the necessary fields:
Card Element ID: Enter the ID of the parent group you want to animate (e.g. card_element_id). Image ID (Optional): Enter the ID of the image inside the group to enable the Parallax effect on the image. Animation Speed: Specifies the speed of the animations when the mouse moves over the group (e.g. 0.6 seconds). Reset Speed: Adjusts the speed of the animation when the mouse leaves the group (e.g. 0.6 seconds).

5- Preview and Finalize: Preview the page to see the animation in action: When the user moves the mouse over the group, the group tilts and casts a dynamic shadow based on the cursor position. If an Image ID was specified, the image performs an interactive Parallax effect. When the mouse leaves the group, the group and image smoothly return to their initial position.