23,679 Downloads

75 Comments

Community Support

6 months Updates

Release: 5 years ago

Update: 3 years ago

Cards Snippet

Product description

We found that sometimes when we work at different websites, we want to show a lot of information in a small container. So...how can we keep a presentation card usable and beautiful when you have too much information? With the modern CSS3 3D transitions, we can make the web even more interesting.

Did you know that we can have more than 1 dimension on the web pages? If not, this is a very good starting point for you to understand how the CSS3 3D transitions are working. Since this effect resembles the action of flipping a card, it surprises the user in a nice way, while keeping the experience natural.

For this item we used Bootstrap for the 12-col grid. It helps us to keep the rotating cards responsive for any devices.

We created the design for the both faces of the card and a container-card that will let the card perform the 3D rotating action.

You can use this rotating CSS card for presentations of your team or for showing more information about the users from your platform. We're sure you can find many other use cases for it and we would like to see them all! Just add a link in the comments and we'll let you know what we think.

So rock your project with some awesome new effects. The users will be pleasantly surprised by them, for sure!

Product certified by: Creative Tim

We are here to help you!

75 Web Developers commented on this product

cristina 5 years ago

Give it a try :-)

tim.minor 5 years ago

Great name, great content. :)

adriana.mart

downloaded

5 years ago

This is really an awesome new effect like you said! Thanks!

timothy.liljebrunn

downloaded

5 years ago

Wow what a great job you are doing! It looks amazing! I have one question, I tried to use your rotating cards. It works perfectly fine, its just that it creates 3 rows instead of 1 row with 3 columns like on your website. Do you know what could be the problem? I used the code under "Here is the html code for one card:" Is there some specific

tag I should add? Have a great day!

cristina

Hi, Thank you! Would you mind changing your profile name so we can contact you. We made a test on template.html file with the card code from live preview and it was working ok. We will contact you as soon as we know who you are.

5 years ago

charan.m

downloaded

5 years ago

the rotation is so cool, thanks for sharing

cristina 5 years ago

Hello everybody! There was an issue with the back view of the Rotating CSS Card on the latest version of Firefox(30.0). We fixed it so we recommend you to download it again.

andreas.käs

downloaded

5 years ago

Hi!!!! What a fuc.... great work!!!! But... I can´t see the backview... :( Can you help? Greets from Germany