Component – 3D Card

Card element floating in a 3D space.Download + DemoView DemoDownload ComponentHow 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 a…


This content originally appeared on CodyHouse and was authored by CodyHouse

Card element floating in a 3D space.3D Card

Download + Demo

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">
</figure>

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]);


This content originally appeared on CodyHouse and was authored by CodyHouse


Print Share Comment Cite Upload Translate Updates
APA

CodyHouse | Sciencx (2021-11-24T15:59:28+00:00) Component – 3D Card. Retrieved from https://www.scien.cx/2021/11/24/component-3d-card/

MLA
" » Component – 3D Card." CodyHouse | Sciencx - Wednesday November 24, 2021, https://www.scien.cx/2021/11/24/component-3d-card/
HARVARD
CodyHouse | Sciencx Wednesday November 24, 2021 » Component – 3D Card., viewed ,<https://www.scien.cx/2021/11/24/component-3d-card/>
VANCOUVER
CodyHouse | Sciencx - » Component – 3D Card. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/24/component-3d-card/
CHICAGO
" » Component – 3D Card." CodyHouse | Sciencx - Accessed . https://www.scien.cx/2021/11/24/component-3d-card/
IEEE
" » Component – 3D Card." CodyHouse | Sciencx [Online]. Available: https://www.scien.cx/2021/11/24/component-3d-card/. [Accessed: ]
rf:citation
» Component – 3D Card | CodyHouse | Sciencx | https://www.scien.cx/2021/11/24/component-3d-card/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.