❤️ Creative Tim Club - Access all our Present & Future Premium Products

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
Rotating CSS Card - Fully Coded and Responsive HTML5
Rotating CSS Card - Crafted with Bootstrap - the most popular Front End Framework
Downloads
33,582
Version
1.4.0
Changelog
Updated
7 years ago
Released
9 years ago
Reviews
Star
Handcrafted Elements
0
Customized Plugins
0
Example Pages
0
Community Support
Documentation
Fully Responsive

We are here to help you!

76 Web Developers commented on this product

dmateoiazp
  • downloaded
5 years ago

Hello, how do i add this to a wordpress page?

samaritanni
  • downloaded
5 years ago

Great work....you really make me love bootstrap a lot...but can you please drop another template but this time use materialise CSS framework...

archana.vish
  • downloaded
5 years ago

Hi, I am trying to integrate this beautiful layout with my paper kit page. Unfortunately, the bootstrap versions don't match and your cards come one below the other. A little pressed for time here and thought I'd ask you about the layout support for Bootstrap 4 while I also look into this. Trying this with https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css

archana.vish
  • downloaded

Took a little bit of re-ordering but finally done. Love the rotating cards.
5 years ago

oscar0812torres
  • downloaded
4 years ago

Is there going to be an update to bootstrap 4? Would love it!

mehmetk
  • downloaded
4 years ago

i like that thx bro

jesusdaa1
  • downloaded
4 years ago

Buenas noches me gusto este padrísimo diseño, pero tengo una pregunta, ¿cómo puedo unir dos paginas de este mismo catálogo, esto es que una pagina sea la principal y debajo de ella por ejemplo esta pagina de tarjetas giratorias?, lo pregunto porque lo intente, pero me di cuenta que cada una tiene un CSS que ya acomode como lo requiero, pero ambas tiene los mismos nombres en el CSS pero se distorsiona el html porque cada pagina manda llamar a sus tags (h1,h2, p, div) de forma diferente.

dragosct
  • owner

Hi, @jesusdaa1 ! Thank you for using our products. Please, can you speak English, it will be a more comfortable conversation? Regards, Dragos
4 years ago

You have to be logged in to post a comment. Login here.