3D Text Block
A text block that rotates on hover.
All components are based on CodyFrame.
This component includes variations. Variations share the same SCSS/JS code but differ in their HTML.
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
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.