Generate an animated effect with rotation when hovering (mouseover)

Establish a rotational mechanism based on the position of the cursor. 

Throughout this tutorial: 

1. Establish the correct perspective
2. Create the triggering element
3. Animate the rotational movement
4. Set the default state
5. Add a special effect for emphasis

Establish the correct perspective

1. Ensure that the ancestor element of the target element for animation is selected
2. Within the Style panel under Transitions & transforms, modify the Children perspective to 1000 pixels

Create the triggering element

1. Select the specific element to be used as the trigger (like a Card)
2. In the Interactions panel, click the addition symbol near On Selected Element and choose Mouse movement over the element from the dropdown menu

Animate the rotational movement

1. Access the Interactions panel > On mouse movement > Action > Initiate mouse animation
2. Click the plus symbol next to Mouse animations
3. Name it (for example, Hover Rotation)
4. Click the plus symbol under the timeline of Mouse X actions at 0% and pick Rotate
5. In the Rotate section, adjust the y-axis to -5 degrees
6. Select the Card element at 100% and in the Rotate field, change its y-axis to 5 degrees
7. Add a Rotate action under Mouse Y actions
8. At 0% in Rotate, set the x-axis to 5 degrees
9. At 100% in Rotate, set the x-axis to -5 degrees
10. Complete the animation adjustments to refine the Smoothing

Set the default state

1. In the Interactions panel under On mouse movement, define the Mouse X position as 50%
2. Establish the Mouse Y position as 50%

Add a special effect for emphasis

1. Place a new Div block onto the canvas within the corresponding element (Card)
2. Create a Class and assign a name (such as Card-highlight)
3. Set its dimensions (e.g., to 400 pixels) and position to absolute
4. Position it from the top left corner
5. Choose a suitable Background color (e.g., white)
6. Modify the Radius under Border to 50%
7. Adjust the Opacity to 10% under Effects
8. Apply a Blur filter and change the Radius to 50 pixels
9. In the Interactions panel, pick Hover Rotation
10. In the Mouse X timeline at 0%, include a Move animation and set its x-axis to 100%
11. In the Mouse X timeline at 100%, incorporate a Move animation with its x-axis set to -50%
12. For the Mouse Y timeline at 0%, integrate a Move animation and adjust its y-axis to 50%
13. At 100% in the Mouse Y timeline, apply a Move animation and modify its y-axis to -50%

Review your progress in preview mode.