🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%

3D Text Block

A text block that rotates on hover.

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 Text Block is a text container that rotates on hover. It can be used to add a bold CTA link to a section.

By default, the text block rotates as a single unit. You can, optionally, split the block into up to 4 units that rotate independently (e.g., adding the .td-text-block--split-2 class modifier - see demo). To split the block into multiple units, in addition to adding the proper class modifier, make sure to duplicate the .td-text-block__wrapper element.

To make the content accessible, make sure to set a proper aria-label on the .td-text-block element. This way, screen readers will read only the aria-label content and skip the text duplicates.


Project duplicated

Project created

Globals imported

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