How to Add the Rotating CSS Card to Your Webpage

Dawid Adach -

The tutorial below will explain to you step by step how to implement Rotating CSS Card in your webpage. You can get the freebie here.

  1. Download Rotating CSS Card.
  2. Unpack zip to certain location on your disk.
  3. Open x_rotating_card v1.3 folder.
  4. Create new file and name it sample.html.
  5. Open the file in an editor and paste the content below:

https://gist.github.com/dawidadach/ac99844b13bbd66fcbf8

Note: This is framework of very basic HTML page which will be extended in the next steps. Now we will add some import some cascading sheet styles to our framework
6. Import CSS card style sheet into your document.

Place the code below between the <head> and </head> section:

https://gist.github.com/dawidadach/7346712024c17d15069c

Note: If you store css files in different location keep in mind that you have to adjust location (i.e. <link href=”location/of/css/files/bootstrap.css” rel=”stylesheet” />)

7. Paste the code below between the <body> and </body> section :

 

https://gist.github.com/dawidadach/08737beca73cf53ff346

That will result in single Rotating CSS card as below:


 

Note: If you want to create more cards, next to each other copy data starting from <div class=”col-sm-3″> till corresponding end </div> tag. And paste it after.

Note: Col-sm-3 is an example of Grid Bootstrap element. Bootstrap includes a responsive, mobile-first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. In a nutshell, you can place 12 columns with size 1 (col-sm-1) or less wide (i.e. 4x col-sm-3). If display allows, they will be shown in 1 line, but if you scale the window down, they displayed one below the other. Read more here:

8. Adjust your card

The picture below explains how to adjust certain parts of css card, both front and backside.