cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Untitled

A Pen By Captain Anonymous

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cards</title>
    <link rel="stylesheet" href="css/cards.css"/>
</head>
<body>

<ul class="cards">
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
    <li class="card"></li>
</ul>

</body>
</html>
            
          
!
            
              /*
CSS Card Deck

stylus:
@import 'nib'

.cards
  absolute: left 35% top 10%
  list-style: none

.card
  position: absolute
  size: 200px 300px
  background: lightgray
  border: 2px solid slategray
  border-radius: 10px
  transition: transform .5s, background .3s
  for n in (1..14)
    &:nth-child({n})
      transform: rotateZ((n * 10 - 70)deg)
      transform-origin: 50% 180%
      &:hover
        transform: rotateZ((n * 10 - 70)deg) translateY(-50px)
  &:hover
    background: darken(@background, 20%)
*/
.cards {
  position: absolute;
  left: 35%;
  top: 10%;
  list-style: none;
}
.card {
  position: absolute;
  width: 200px;
  height: 300px;
  background: #d3d3d3;
  border: 2px solid #778090;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-transition: -webkit-transform 0.5s, background 0.3s;
  -moz-transition: -moz-transform 0.5s, background 0.3s;
  -o-transition: -o-transform 0.5s, background 0.3s;
  -ms-transition: -ms-transform 0.5s, background 0.3s;
  transition: transform 0.5s, background 0.3s;
}
.card:nth-child(1) {
  -webkit-transform: rotateZ(-60deg);
  -moz-transform: rotateZ(-60deg);
  -o-transform: rotateZ(-60deg);
  -ms-transform: rotateZ(-60deg);
  transform: rotateZ(-60deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(1):hover {
  -webkit-transform: rotateZ(-60deg) translateY(-50px);
  -moz-transform: rotateZ(-60deg) translateY(-50px);
  -o-transform: rotateZ(-60deg) translateY(-50px);
  -ms-transform: rotateZ(-60deg) translateY(-50px);
  transform: rotateZ(-60deg) translateY(-50px);
}
.card:nth-child(2) {
  -webkit-transform: rotateZ(-50deg);
  -moz-transform: rotateZ(-50deg);
  -o-transform: rotateZ(-50deg);
  -ms-transform: rotateZ(-50deg);
  transform: rotateZ(-50deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(2):hover {
  -webkit-transform: rotateZ(-50deg) translateY(-50px);
  -moz-transform: rotateZ(-50deg) translateY(-50px);
  -o-transform: rotateZ(-50deg) translateY(-50px);
  -ms-transform: rotateZ(-50deg) translateY(-50px);
  transform: rotateZ(-50deg) translateY(-50px);
}
.card:nth-child(3) {
  -webkit-transform: rotateZ(-40deg);
  -moz-transform: rotateZ(-40deg);
  -o-transform: rotateZ(-40deg);
  -ms-transform: rotateZ(-40deg);
  transform: rotateZ(-40deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(3):hover {
  -webkit-transform: rotateZ(-40deg) translateY(-50px);
  -moz-transform: rotateZ(-40deg) translateY(-50px);
  -o-transform: rotateZ(-40deg) translateY(-50px);
  -ms-transform: rotateZ(-40deg) translateY(-50px);
  transform: rotateZ(-40deg) translateY(-50px);
}
.card:nth-child(4) {
  -webkit-transform: rotateZ(-30deg);
  -moz-transform: rotateZ(-30deg);
  -o-transform: rotateZ(-30deg);
  -ms-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(4):hover {
  -webkit-transform: rotateZ(-30deg) translateY(-50px);
  -moz-transform: rotateZ(-30deg) translateY(-50px);
  -o-transform: rotateZ(-30deg) translateY(-50px);
  -ms-transform: rotateZ(-30deg) translateY(-50px);
  transform: rotateZ(-30deg) translateY(-50px);
}
.card:nth-child(5) {
  -webkit-transform: rotateZ(-20deg);
  -moz-transform: rotateZ(-20deg);
  -o-transform: rotateZ(-20deg);
  -ms-transform: rotateZ(-20deg);
  transform: rotateZ(-20deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(5):hover {
  -webkit-transform: rotateZ(-20deg) translateY(-50px);
  -moz-transform: rotateZ(-20deg) translateY(-50px);
  -o-transform: rotateZ(-20deg) translateY(-50px);
  -ms-transform: rotateZ(-20deg) translateY(-50px);
  transform: rotateZ(-20deg) translateY(-50px);
}
.card:nth-child(6) {
  -webkit-transform: rotateZ(-10deg);
  -moz-transform: rotateZ(-10deg);
  -o-transform: rotateZ(-10deg);
  -ms-transform: rotateZ(-10deg);
  transform: rotateZ(-10deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(6):hover {
  -webkit-transform: rotateZ(-10deg) translateY(-50px);
  -moz-transform: rotateZ(-10deg) translateY(-50px);
  -o-transform: rotateZ(-10deg) translateY(-50px);
  -ms-transform: rotateZ(-10deg) translateY(-50px);
  transform: rotateZ(-10deg) translateY(-50px);
}
.card:nth-child(7) {
  -webkit-transform: rotateZ(0deg);
  -moz-transform: rotateZ(0deg);
  -o-transform: rotateZ(0deg);
  -ms-transform: rotateZ(0deg);
  transform: rotateZ(0deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(7):hover {
  -webkit-transform: rotateZ(0deg) translateY(-50px);
  -moz-transform: rotateZ(0deg) translateY(-50px);
  -o-transform: rotateZ(0deg) translateY(-50px);
  -ms-transform: rotateZ(0deg) translateY(-50px);
  transform: rotateZ(0deg) translateY(-50px);
}
.card:nth-child(8) {
  -webkit-transform: rotateZ(10deg);
  -moz-transform: rotateZ(10deg);
  -o-transform: rotateZ(10deg);
  -ms-transform: rotateZ(10deg);
  transform: rotateZ(10deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(8):hover {
  -webkit-transform: rotateZ(10deg) translateY(-50px);
  -moz-transform: rotateZ(10deg) translateY(-50px);
  -o-transform: rotateZ(10deg) translateY(-50px);
  -ms-transform: rotateZ(10deg) translateY(-50px);
  transform: rotateZ(10deg) translateY(-50px);
}
.card:nth-child(9) {
  -webkit-transform: rotateZ(20deg);
  -moz-transform: rotateZ(20deg);
  -o-transform: rotateZ(20deg);
  -ms-transform: rotateZ(20deg);
  transform: rotateZ(20deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(9):hover {
  -webkit-transform: rotateZ(20deg) translateY(-50px);
  -moz-transform: rotateZ(20deg) translateY(-50px);
  -o-transform: rotateZ(20deg) translateY(-50px);
  -ms-transform: rotateZ(20deg) translateY(-50px);
  transform: rotateZ(20deg) translateY(-50px);
}
.card:nth-child(10) {
  -webkit-transform: rotateZ(30deg);
  -moz-transform: rotateZ(30deg);
  -o-transform: rotateZ(30deg);
  -ms-transform: rotateZ(30deg);
  transform: rotateZ(30deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(10):hover {
  -webkit-transform: rotateZ(30deg) translateY(-50px);
  -moz-transform: rotateZ(30deg) translateY(-50px);
  -o-transform: rotateZ(30deg) translateY(-50px);
  -ms-transform: rotateZ(30deg) translateY(-50px);
  transform: rotateZ(30deg) translateY(-50px);
}
.card:nth-child(11) {
  -webkit-transform: rotateZ(40deg);
  -moz-transform: rotateZ(40deg);
  -o-transform: rotateZ(40deg);
  -ms-transform: rotateZ(40deg);
  transform: rotateZ(40deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(11):hover {
  -webkit-transform: rotateZ(40deg) translateY(-50px);
  -moz-transform: rotateZ(40deg) translateY(-50px);
  -o-transform: rotateZ(40deg) translateY(-50px);
  -ms-transform: rotateZ(40deg) translateY(-50px);
  transform: rotateZ(40deg) translateY(-50px);
}
.card:nth-child(12) {
  -webkit-transform: rotateZ(50deg);
  -moz-transform: rotateZ(50deg);
  -o-transform: rotateZ(50deg);
  -ms-transform: rotateZ(50deg);
  transform: rotateZ(50deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(12):hover {
  -webkit-transform: rotateZ(50deg) translateY(-50px);
  -moz-transform: rotateZ(50deg) translateY(-50px);
  -o-transform: rotateZ(50deg) translateY(-50px);
  -ms-transform: rotateZ(50deg) translateY(-50px);
  transform: rotateZ(50deg) translateY(-50px);
}
.card:nth-child(13) {
  -webkit-transform: rotateZ(60deg);
  -moz-transform: rotateZ(60deg);
  -o-transform: rotateZ(60deg);
  -ms-transform: rotateZ(60deg);
  transform: rotateZ(60deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(13):hover {
  -webkit-transform: rotateZ(60deg) translateY(-50px);
  -moz-transform: rotateZ(60deg) translateY(-50px);
  -o-transform: rotateZ(60deg) translateY(-50px);
  -ms-transform: rotateZ(60deg) translateY(-50px);
  transform: rotateZ(60deg) translateY(-50px);
}
.card:nth-child(14) {
  -webkit-transform: rotateZ(70deg);
  -moz-transform: rotateZ(70deg);
  -o-transform: rotateZ(70deg);
  -ms-transform: rotateZ(70deg);
  transform: rotateZ(70deg);
  -webkit-transform-origin: 50% 180%;
  -moz-transform-origin: 50% 180%;
  -o-transform-origin: 50% 180%;
  -ms-transform-origin: 50% 180%;
  transform-origin: 50% 180%;
}
.card:nth-child(14):hover {
  -webkit-transform: rotateZ(70deg) translateY(-50px);
  -moz-transform: rotateZ(70deg) translateY(-50px);
  -o-transform: rotateZ(70deg) translateY(-50px);
  -ms-transform: rotateZ(70deg) translateY(-50px);
  transform: rotateZ(70deg) translateY(-50px);
}
.card:hover {
  background: #a9a9a9;
}
            
          
!
999px
Loading ..................

Console