PlayingCard.css

/* Card basic structure and positioning (Including front and back) */
/* Slightly modified version from the original: http://selfthinker.github.io/CSS-Playing-Cards/ (CC BY-SA) */
.card-group {
  transform-style: preserve-3d;
  transform-origin: 3em 4.5em; /* half of card size */
}

.card {
  width: 6em;
  height: 9em;
  padding: .25em 0;
  background: #FFF;
  border-radius: .5em;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);

}

/* hide back of pane during swap */
.card.front, .card.back {
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.card.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}


.card.back {
  /* back, initially hidden pane */
	transform: rotateY(180deg);
  background: linear-gradient(135deg, #EC4444 25%, transparent 25%) -1em 0,
    linear-gradient(225deg, #EC4444 25%, transparent 25%) -1em 0,
    linear-gradient(315deg, #EC4444 25%, transparent 25%),
    linear-gradient(45deg, #EC4444 25%, transparent 25%);
  background-size: 2em 2em;
  background-color: #FFF;
}

.card:after {
  position: absolute;
  bottom: .25em;
  right: .15em;
  content: attr(data-index);
  transform: rotate(180deg);
}

/* Default to black for Spades and Clubs */
.card-group span, .card:after {
    display: block;
    letter-spacing: -.1em;
    text-align: center;
    width: .8em;
    line-height: .9;
}
/* Hearts and diamonds are red */
.card.hearts, .card.diamonds {
    color: #F00;
}

/* 3 columns of pips, maximum of 4 pips per column */
.card span:before, .card span:after {
    width: .8em;
    font-size: 1.75em;
    height: 4em;
    line-height: 9;
    position: absolute;
    top: .5em;
    left: .55em;
    overflow: hidden;
}
.card.hearts span:before, .card.hearts .rank:after {
    content: "♥ ♥ ♥ ♥"
}
.card.diamonds span:before,.card.diamonds .rank:after {
    content: "♦ ♦ ♦ ♦"
}
.card.spades span:before,.card.spades .rank:after {
    content: "♠ ♠ ♠ ♠"
}
.card.clubs span:before,.card.clubs .rank:after {
    content: "♣ ♣ ♣ ♣"
}

/* Centre column of pips */
.card .rank:after {
    left: 1.3em;
}
/* Right column of pips */
.card .suit:before {
    left: 2em;
}

/* Four pips */
.v8 span:before, .v9 span:before, .v10 span:before /* L/R: 8, 9, 10 */
{
    line-height: 1
}

/* Three pips */
.v6 span:before, .v7 span:before, /* L/R: 6, 7 */
.v3 .rank:after /* C: 3 */
{
    line-height: 1.333;
}

/* Two pips */
.v4 span:before,.v5 span:before,/* L/R: 4, 5 */
.v2 .rank:after,.v10 .rank:after/* C: 2, 10 */
{
    line-height: 2;
}

/* One pip */
.v14 .rank:after,.v5 .rank:after,.v7 .rank:after,.v9 .rank:after/* C: A, 5, 7, 9 */
{
    line-height: 4;
}

/* Face cards */
.v11 .suit:after,.v12 .suit:after,.v13 .suit:after, .v14 .rank:after {
    width: .95em;
    height: 1.2em;
    font: 5.2em/1.2 Georgia, serif;
    text-align: center;
    left: .1em;
    top: .2em;
}

.v11 .suit:after {
    content: "♟"
}
.v12 .suit:after {
    content: "♛"
}
.v13 .suit:after {
    content: "♚"
}