A little jQuery plugin to 3D transform elements relative to the cursor position

Demo: matthias-vogt.github.io/face-cursor.js

This is a jQuery plugin that adds CSS transform: rotate3d() based on the element's position relative to the mouse.

face-cursor.js depends on jQuery, so make sure you have that loaded. You can use it like this:

$(".some, .elements").faceCursor();

$(".some, .elements").faceCursor({
    options: "go here"
});

<script src="jquery.min.js"></script>
<script src="face-cursor.js"></script>

For better loading performance, I'd recommend loading the script as non-critical content (by putting the <script> and <style> tags at the end of the body tag). Please also consider concatenating it with your other dependencies.

Install and update easily using npm:

npm install face-cursor --save

{
    avertCursor: false,
    // whether the element should face away from the cursor instead of toward it
    perspective: "6rem", // CSS perspective for transforms
    cacheElementData: true // whether height, width and offset of the elements should be cached instead of recalculated each frame (if the elements move around or you want the effect to be consistent during browser resizing, disable)
}

The plugin's instances can be destroyed on specific elements by doing

$elements.data("plugin_faceCursor").destroy();

…or, to destroy all instances:

$("*").filter(function() {
    return $(this).data("plugin_faceCursor") !== undefined
}).each(function() {
    $(this).data("plugin_faceCursor").destroy()
});

This uses CSS3 transitions and window.requestAnimationFrame, so browser support is ie10+.

You are very welcome to contribute! Please send pull requests and issues.

Feel free to post issues to ask for features.

• support CommonJS and AMD
• automatic testing

ISC