Single input CSS 3D form

Single input CSS 3D form

A simple 3D form concept where different faces act as different parts of the form. The default state looks like a flat button which surprises the user by rotating to show the next face which is the text input.

On submission the user sees a pulsating loader and finally the thank you message on completion. This thank you message face could also be used to show validation errors.

This concept can be further enhanced to have multiple inputs as different faces of the cuboids being manipulated dynamically using JS.

Demo | Download

Leave a Reply

Your email address will not be published. Required fields are marked *