3D Look at Mouse Cursor
This interaction makes a card visually tilt or “look” toward the mouse cursor of the user when hovered, creating a dynamic 3D-like effect. When the cursor leaves the card, it smoothly returns to its original centered position.
How it works
Trigger: While Mouse Hovering - The interaction starts when the user hovers on the card.
Action: Rotate 3D - Rotates the card in 3D space to follow the mouse cursor direction.
How to use
Select the card element to apply the interaction to, then import the interaction.
Interactions used
Code Block
Copy the whole markup below and paste it into a new post in your WordPress block editor.
<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"0"},"padding":{"top":"0","right":"0"}},"border":{"radius":"20px","color":"#0b0d4b","width":"40px"}}} -->
<div class="wp-block-columns has-border-color" style="border-color:#0b0d4b;border-width:40px;border-radius:20px;padding-top:0;padding-right:0"><!-- wp:column {"style":{"spacing":{"padding":{"right":"0","left":"0"}}}} -->
<div class="wp-block-column" style="padding-right:0;padding-left:0"><!-- wp:cover {"url":"[http://e2etest.local/wp-content/uploads/2025/06/pexels-photo-2662116-2662116-scaled.jpg","id":1261,"alt":"Idyllic](http://e2etest.local/wp-content/uploads/2025/06/pexels-photo-2662116-2662116-scaled.jpg%22,%22id%22:1261,%22alt%22:%22Idyllic) view of Moraine Lake reflecting mountains and forests in Banff National Park, Canada.","dimRatio":20,"customOverlayColor":"#7fa2a9","isUserOverlayColor":false,"isDark":false,"sizeSlug":"full","layout":{"type":"constrained"}} -->
<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-1261 size-full" alt="Idyllic view of Moraine Lake reflecting mountains and forests in Banff National Park, Canada." src="http://e2etest.local/wp-content/uploads/2025/06/pexels-photo-2662116-2662116-scaled.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-20 has-background-dim" style="background-color:#7fa2a9"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
Interaction Code
Copy the entire text below, and import it as a new interaction. See How to Import Interactions on how to do this.
{
"type": "mouseHovering",
"timelines": [
{
"loop": false,
"onceOnly": false,
"alternate": false,
"reset": false,
"reverse": false,
"actions": [
{
"type": "rotate3d",
"target": {
"type": "trigger",
"value": "",
"blockName": "",
"options": ""
},
"timing": {
"isStartingState": false,
"start": 0,
"duration": 0.5,
"easing": "linear",
"customEasing": ""
},
"value": {
"x": "0",
"y": "-30",
"z": "0"
}
},
{
"type": "rotate3d",
"target": {
"type": "trigger",
"value": "",
"blockName": "",
"options": ""
},
"timing": {
"isStartingState": false,
"start": 100,
"duration": 0.5,
"easing": "linear",
"customEasing": ""
},
"value": {
"x": "0",
"y": "30",
"z": "0"
}
}
]
},
{
"loop": false,
"onceOnly": false,
"alternate": false,
"reset": false,
"reverse": false,
"actions": [
{
"type": "rotate3d",
"target": {
"type": "trigger",
"value": "",
"blockName": "",
"options": ""
},
"timing": {
"isStartingState": false,
"start": 0,
"duration": 0.5,
"easing": "linear",
"customEasing": ""
},
"value": {
"x": "30",
"y": "",
"z": ""
}
},
{
"type": "rotate3d",
"target": {
"type": "trigger",
"value": "",
"blockName": "",
"options": ""
},
"timing": {
"isStartingState": false,
"start": 100,
"duration": 0.5,
"easing": "linear",
"customEasing": ""
},
"value": {
"x": "-30",
"y": "",
"z": ""
}
}
]
}
],
"options": {
"resetToCenter": true,
"resetDelay": "0"
}
}