⚡️ Black Friday ends in 1 day - 50% off CodyHouse Pro Lifetime →


Progress value is 30%

3D Card

Card element floating in a 3D space.

View Demo


All components are based on CodyFrame.

This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.

How To

The 3D Card component is a card element that moves in a 3D space when hovering the mouse over it.

To modify the 3D effect, use the data-rotation and data-perspective attributes: the first one is used to set a max rotation value (default is 2 degrees) and the second is for the perspective (default is 300px):

<figure class="td-card js-td-card" data-rotation="5" data-perspective="600px">
  <img src="img-1.jpg" alt="Image description">

Dynamic Content #

If your card is created dynamically, you may need to initialize it (once it has been added to the page) to make it work properly.

Once the dynamic content has been added to the page, initialize it using the TdCard object:

var tdCard = document.getElementsByClassName('td-card');
if(tdCard.length > 0) new TdCard(tdCard[0]);

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.