3d-attraction v1.0.0

3D Attraction

A library to rotate DOM elements in 3D space based on mouse movement. Demo on CodePen.

Getting Started

Install with NPM

$ npm i --save 3d-attraction

Require the module

const attract = require('3d-attraction')

Add data attributes to the container and target. Container is the area the mouse movement is relative too, and target is the element that will be transformed.

<div class="my-container" data-3d-attract-container>
  <div class="my-target-parent">
    <div class="my-target" data-3d-attract></div>
  </div>
</div>

Add CSS and tweak values to your desire

/* perspective should be added to target parent not necessarily the container */
.my-target-parent {
  perspective: 400px;
}

.my-target {
  transform-style: preserve-3d;
  transition: 1.5s ease-out;
}