Skip to content

Instantly share code, notes, and snippets.

@Tiberriver256
Last active Feb 24, 2021
Embed
What would you like to do?
GistPad - Template (Basic - HTML/JS/CSS)
<div class="playingCards fourColours faceImages">
<div class="card rank-7 spades">
<span class="rank"></span>
<span class="suit"></span>
</div>
</div>
<div class="playingCards faceImages">
<div class="card rank-7 diams">
<span class="rank"></span>
<span class="suit"></span>
</div>
</div>
{
"scripts": [],
"styles": []
}
/**
* Styles for CSS Playing Cards
*
* @author Anika Henke <anika@selfthinker.org>
* @license CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
* @version 2011-06-14
* @link http://selfthinker.github.com/CSS-Playing-Cards/
*/
/* card itself
********************************************************************/
.playingCards .card {
display: inline-block;
width: 3.3em;
height: 4.6em;
border: 1px solid #666;
border-radius: 0.3em;
-moz-border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-khtml-border-radius: 0.3em;
padding: 0.25em;
margin: 0 0.5em 0.5em 0;
text-align: center;
font-size: 1.2em; /* @change: adjust this value to make bigger or smaller cards */
font-weight: normal;
font-family: Arial, sans-serif;
position: relative;
background-color: #fff;
-moz-box-shadow: 0.2em 0.2em 0.5em #333;
-webkit-box-shadow: 0.2em 0.2em 0.5em #333;
box-shadow: 0.2em 0.2em 0.5em #333;
}
.playingCards a.card {
text-decoration: none;
}
/* selected and hover state */
.playingCards a.card:hover,
.playingCards a.card:active,
.playingCards a.card:focus,
.playingCards label.card:hover,
.playingCards strong .card {
bottom: 1em;
}
.playingCards label.card {
cursor: pointer;
}
.playingCards .card.back {
text-indent: -4000px;
background-color: #ccc;
background-repeat: repeat;
background-image: url(data:image/gif;base64,R0lGODlhJAAkAJEAAOjFsezdztOKbL5QKCH5BAAAAAAALAAAAAAkACQAAAL/HC4RAqm/mmLHyHmAbczB11Ea8ombJKSgKo6Z17pXFznmS1JptiX0z3vVhpEKDoUIkoa0olGIUeZUk1RI6Yn2mh/FDAt6frOrRRTqXPpsVLYugzxaVy+YcBdnoWPZOT0E4eckQtZFZBjWoHixQFWl6Nhol6R2p1Okt5TGaEWZA6fjiMdhZgPHeWrTWGVq+jTZg1HYyAEWKLYzmyiGKoUimilz+YYryyTlg5RcDJSAbNx0Q7lMcbIGEyzTK8zVdfVaImzs/QV+prYqWWW2ObkoOApM/Em/rUlIm7fijs8a2EEKEaZ3AsMUgneEU6RcpJbZ27aGHkAO2Ors8xQH1IR0Bn5YnOtVAAA7); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
background-image: -moz-repeating-linear-gradient(
34% 6% 135deg,
#0f1e59,
#75a1bf,
#3e3e63 50%
);
background-image: -webkit-gradient(
radial,
center center,
20,
center center,
80,
from(#3c3),
color-stop(0.4, #363),
to(#030)
);
/* yes, it's intentional that Mozilla, Webkit, Opera and IE all will get different backgrounds ... why not? :) */
}
/* suit colours
********************************************************************/
.playingCards .card.diams {
color: #f00 !important;
}
.playingCards.fourColours .card.diams {
color: #00f !important;
}
[lang='de'] .playingCards.fourColours .card.diams {
color: #f60 !important;
}
.playingCards .card.hearts {
color: #f00 !important;
}
.playingCards .card.spades {
color: #000 !important;
}
[lang='de'] .playingCards.fourColours .card.spades {
color: #090 !important;
}
.playingCards .card.clubs {
color: #000 !important;
}
.playingCards.fourColours .card.clubs {
color: #090 !important;
}
[lang='de'] .playingCards.fourColours .card.clubs {
color: #000 !important;
}
.playingCards .card.joker {
color: #000 !important;
}
.playingCards .card.joker.big {
color: #f00 !important;
}
/* inner bits
********************************************************************/
/* top left main info (rank and suit) */
.playingCards .card .rank,
.playingCards .card .suit {
display: block;
line-height: 1;
text-align: left;
}
.playingCards .card.rank-7 .rank::before {
content: '7';
}
.playingCards .card.spades .suit::before {
content: '\2660';
}
.playingCards .card.diams .suit::before {
content: '\2666';
}
.playingCards .card .suit {
line-height: 0.7;
}
/* checkbox */
.playingCards .card input {
margin-top: -0.05em;
font: inherit;
}
.playingCards.simpleCards .card input,
.playingCards .card.rank-j input,
.playingCards .card.rank-q input,
.playingCards .card.rank-k input,
.playingCards .card.rank-a input {
margin-top: 2.4em;
}
.playingCards.inText .card input {
margin-top: 0;
}
/* different rank letters for different languages */
.playingCards .card .rank:after,
.playingCards .card.joker .rank:before {
position: absolute;
top: 0.25em;
left: 0.25em;
background: #fff;
}
[lang='de'] .playingCards .card.rank-j .rank:after {
content: 'B';
}
[lang='fr'] .playingCards .card.rank-j .rank:after {
content: 'V';
}
[lang='de'] .playingCards .card.rank-q .rank:after,
[lang='fr'] .playingCards .card.rank-q .rank:after {
content: 'D';
}
[lang='fr'] .playingCards .card.rank-k .rank:after {
content: 'R';
}
/* joker (top left symbol) */
.playingCards .card.joker .rank {
position: absolute;
}
.playingCards .card.joker .rank:before {
content: '\2605';
top: 0;
left: 0;
}
.playingCards .card.joker .suit {
text-indent: -9999px;
}
/* inner multiple suits */
.playingCards .card .suit:after {
display: block;
margin-top: -0.8em;
text-align: center;
white-space: pre;
line-height: 0.9;
font-size: 1.3em;
word-spacing: -0.05em;
}
/* make the hearts and clubs symbols fit, because they are a bit bigger than the others */
.playingCards .card.hearts .suit:after {
word-spacing: -0.15em;
}
.playingCards .card.hearts.rank-10 .suit:after {
word-spacing: -0.05em;
letter-spacing: -0.1em;
}
.playingCards .card.clubs.rank-10 .suit:after {
word-spacing: -0.15em;
}
/* 8, 9, 10 are the most crowded */
.playingCards .card.rank-8 .suit:after,
.playingCards .card.rank-9 .suit:after {
letter-spacing: -0.075em;
}
.playingCards .card.rank-10 .suit:after {
letter-spacing: -0.1em;
}
.playingCards .card.clubs .suit:after {
letter-spacing: -0.125em;
}
/*____________ symbols in the middle (suits, full) ____________*/
/* diamonds */
.playingCards .card.rank-2.diams .suit:after {
content: '\2666 \A\A\2666';
}
.playingCards .card.rank-3.diams .suit:after {
content: '\2666 \A\2666 \A\2666';
}
.playingCards .card.rank-4.diams .suit:after {
content: '\2666\00A0\00A0\00A0\2666 \A\A\2666\00A0\00A0\00A0\2666';
}
.playingCards .card.rank-5.diams .suit:after {
content: '\2666\00A0\00A0\00A0\2666 \A\2666 \A\2666\00A0\00A0\00A0\2666';
}
.playingCards .card.rank-6.diams .suit:after {
content: '\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666';
}
.playingCards .card.rank-7.diams .suit:after {
content: '\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666';
}
.playingCards .card.rank-8.diams .suit:after {
content: '\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666';
}
.playingCards .card.rank-9.diams .suit:after {
content: '\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666';
}
.playingCards .card.rank-10.diams .suit:after {
content: '\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666';
}
/* hearts */
.playingCards .card.rank-2.hearts .suit:after {
content: '\2665 \A\A\2665';
}
.playingCards .card.rank-3.hearts .suit:after {
content: '\2665 \A\2665 \A\2665';
}
.playingCards .card.rank-4.hearts .suit:after {
content: '\2665\00A0\00A0\00A0\2665 \A\A\2665\00A0\00A0\00A0\2665';
}
.playingCards .card.rank-5.hearts .suit:after {
content: '\2665\00A0\00A0\00A0\2665 \A\2665 \A\2665\00A0\00A0\00A0\2665';
}
.playingCards .card.rank-6.hearts .suit:after {
content: '\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665';
}
.playingCards .card.rank-7.hearts .suit:after {
content: '\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665';
}
.playingCards .card.rank-8.hearts .suit:after {
content: '\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665';
}
.playingCards .card.rank-9.hearts .suit:after {
content: '\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665';
}
.playingCards .card.rank-10.hearts .suit:after {
content: '\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665';
}
/* spades */
.playingCards .card.rank-2.spades .suit:after {
content: '\2660 \A\A\2660';
}
.playingCards .card.rank-3.spades .suit:after {
content: '\2660 \A\2660 \A\2660';
}
.playingCards .card.rank-4.spades .suit:after {
content: '\2660\00A0\00A0\00A0\2660 \A\A\2660\00A0\00A0\00A0\2660';
}
.playingCards .card.rank-5.spades .suit:after {
content: '\2660\00A0\00A0\00A0\2660 \A\2660 \A\2660\00A0\00A0\00A0\2660';
}
.playingCards .card.rank-6.spades .suit:after {
content: '\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660';
}
.playingCards .card.rank-7.spades .suit:after {
content: '\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660';
}
.playingCards .card.rank-8.spades .suit:after {
content: '\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660';
}
.playingCards .card.rank-9.spades .suit:after {
content: '\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660';
}
.playingCards .card.rank-10.spades .suit:after {
content: '\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660';
}
/* clubs */
.playingCards .card.rank-2.clubs .suit:after {
content: '\2663 \A\A\2663';
}
.playingCards .card.rank-3.clubs .suit:after {
content: '\2663 \A\2663 \A\2663';
}
.playingCards .card.rank-4.clubs .suit:after {
content: '\2663\00A0\00A0\00A0\2663 \A\A\2663\00A0\00A0\00A0\2663';
}
.playingCards .card.rank-5.clubs .suit:after {
content: '\2663\00A0\00A0\00A0\2663 \A\2663 \A\2663\00A0\00A0\00A0\2663';
}
.playingCards .card.rank-6.clubs .suit:after {
content: '\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663';
}
.playingCards .card.rank-7.clubs .suit:after {
content: '\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663';
}
.playingCards .card.rank-8.clubs .suit:after {
content: '\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663';
}
.playingCards .card.rank-9.clubs .suit:after {
content: '\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663';
}
.playingCards .card.rank-10.clubs .suit:after {
content: '\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663';
}
/*____________ symbols in the middle (faces as images) ____________*/
.playingCards.faceImages .card.rank-j .suit:after,
.playingCards.faceImages .card.rank-q .suit:after,
.playingCards.faceImages .card.rank-k .suit:after {
content: '';
}
.playingCards.faceImages .card.rank-j,
.playingCards.faceImages .card.rank-q,
.playingCards.faceImages .card.rank-k,
.playingCards.faceImages .card.joker {
background-repeat: no-repeat;
background-position: -1em 0;
/* @change: smaller cards: more negative distance from the left
bigger cards: 0 or more positive distance from the left */
/* for a centered full background image:
background-position: .35em 0;
-moz-background-size: contain;
-o-background-size: contain;
-webkit-background-size: contain;
-khtml-background-size: contain;
background-size: contain;
*/
}
.playingCards.faceImages .card.rank-j.diams {
background-image: url(faces/JD.gif);
}
.playingCards.faceImages .card.rank-j.hearts {
background-image: url(faces/JH.gif);
}
.playingCards.faceImages .card.rank-j.spades {
background-image: url(faces/JS.gif);
}
.playingCards.faceImages .card.rank-j.clubs {
background-image: url(faces/JC.gif);
}
.playingCards.faceImages .card.rank-q.diams {
background-image: url(faces/QD.gif);
}
.playingCards.faceImages .card.rank-q.hearts {
background-image: url(faces/QH.gif);
}
.playingCards.faceImages .card.rank-q.spades {
background-image: url(faces/QS.gif);
}
.playingCards.faceImages .card.rank-q.clubs {
background-image: url(faces/QC.gif);
}
.playingCards.faceImages .card.rank-k.diams {
background-image: url(faces/KD.gif);
}
.playingCards.faceImages .card.rank-k.hearts {
background-image: url(faces/KH.gif);
}
.playingCards.faceImages .card.rank-k.spades {
background-image: url(faces/KS.gif);
}
.playingCards.faceImages .card.rank-k.clubs {
background-image: url(faces/KC.gif);
}
.playingCards.faceImages .card.joker {
background-image: url(faces/joker.gif);
}
.playingCards.simpleCards .card.rank-j,
.playingCards.simpleCards .card.rank-q,
.playingCards.simpleCards .card.rank-k {
background-image: none !important;
}
/*____________ symbols in the middle (faces as dingbat symbols) ____________*/
.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-j .suit:after,
.playingCards .card.rank-q .suit:after,
.playingCards .card.rank-k .suit:after,
.playingCards .card.rank-a .suit:after,
.playingCards .card.joker .rank:after {
font-family: Georgia, serif;
position: absolute;
font-size: 3em;
right: 0.1em;
bottom: 0.25em;
word-spacing: normal;
letter-spacing: normal;
line-height: 1;
}
.playingCards .card.rank-j .suit:after {
content: '\265F';
right: 0.15em;
}
.playingCards .card.rank-q .suit:after {
content: '\265B';
}
.playingCards .card.rank-k .suit:after {
content: '\265A';
}
/* joker (inner symbol) */
.playingCards.faceImages .card.joker .rank:after {
content: '';
}
.playingCards .card.joker .rank:after {
position: absolute;
content: '\2766';
top: 0.4em;
left: 0.1em;
}
/* big suits in middle */
.playingCards.simpleCards .card .suit:after,
.playingCards .card.rank-a .suit:after {
font-family: Arial, sans-serif;
line-height: 0.9;
bottom: 0.35em;
}
.playingCards.simpleCards .card.diams .suit:after,
.playingCards .card.rank-a.diams .suit:after {
content: '\2666';
right: 0.4em;
}
.playingCards.simpleCards .card.hearts .suit:after,
.playingCards .card.rank-a.hearts .suit:after {
content: '\2665';
right: 0.35em;
}
.playingCards.simpleCards .card.spades .suit:after,
.playingCards .card.rank-a.spades .suit:after {
content: '\2660';
right: 0.35em;
}
.playingCards.simpleCards .card.clubs .suit:after,
.playingCards .card.rank-a.clubs .suit:after {
content: '\2663';
right: 0.3em;
}
/*____________ smaller cards for use inside text ____________*/
.playingCards.inText .card {
font-size: 0.4em;
vertical-align: middle;
}
.playingCards.inText .card span.rank,
.playingCards.inText .card span.suit {
text-align: center;
}
.playingCards.inText .card span.rank {
font-size: 2em;
margin-top: 0.2em;
}
.playingCards.inText .card span.suit {
font-size: 2.5em;
}
.playingCards.inText .card .suit:after,
.playingCards.inText .card.joker .rank:after {
content: '' !important;
}
.playingCards.inText .card .rank:after {
left: 0.5em;
padding: 0 0.1em;
}
/* hand (in your hand or on table or as a deck)
********************************************************************/
.playingCards ul.table,
.playingCards ul.hand,
.playingCards ul.deck {
list-style-type: none;
padding: 0;
margin: 0 0 1.5em 0;
position: relative;
clear: both;
}
.playingCards ul.hand {
margin-bottom: 3.5em;
}
.playingCards ul.table li,
.playingCards ul.hand li,
.playingCards ul.deck li {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
.playingCards ul.hand,
.playingCards ul.deck {
height: 8em;
}
.playingCards ul.hand li,
.playingCards ul.deck li {
position: absolute;
}
.playingCards ul.hand li {
bottom: 0;
}
.playingCards ul.hand li:nth-child(1) {
left: 0;
}
.playingCards ul.hand li:nth-child(2) {
left: 1.1em;
}
.playingCards ul.hand li:nth-child(3) {
left: 2.2em;
}
.playingCards ul.hand li:nth-child(4) {
left: 3.3em;
}
.playingCards ul.hand li:nth-child(5) {
left: 4.4em;
}
.playingCards ul.hand li:nth-child(6) {
left: 5.5em;
}
.playingCards ul.hand li:nth-child(7) {
left: 6.6em;
}
.playingCards ul.hand li:nth-child(8) {
left: 7.7em;
}
.playingCards ul.hand li:nth-child(9) {
left: 8.8em;
}
.playingCards ul.hand li:nth-child(10) {
left: 9.9em;
}
.playingCards ul.hand li:nth-child(11) {
left: 11em;
}
.playingCards ul.hand li:nth-child(12) {
left: 12.1em;
}
.playingCards ul.hand li:nth-child(13) {
left: 13.2em;
}
.playingCards ul.hand li:nth-child(14) {
left: 14.3em;
}
.playingCards ul.hand li:nth-child(15) {
left: 15.4em;
}
.playingCards ul.hand li:nth-child(16) {
left: 16.5em;
}
.playingCards ul.hand li:nth-child(17) {
left: 17.6em;
}
.playingCards ul.hand li:nth-child(18) {
left: 18.7em;
}
.playingCards ul.hand li:nth-child(19) {
left: 19.8em;
}
.playingCards ul.hand li:nth-child(20) {
left: 20.9em;
}
.playingCards ul.hand li:nth-child(21) {
left: 22em;
}
.playingCards ul.hand li:nth-child(22) {
left: 23.1em;
}
.playingCards ul.hand li:nth-child(23) {
left: 24.2em;
}
.playingCards ul.hand li:nth-child(24) {
left: 25.3em;
}
.playingCards ul.hand li:nth-child(25) {
left: 26.4em;
}
.playingCards ul.hand li:nth-child(26) {
left: 27.5em;
}
/* rotate cards if rotateHand option is on */
.playingCards.rotateHand ul.hand li:nth-child(1) {
-moz-transform: translate(1.9em, 0.9em) rotate(-42deg);
-webkit-transform: translate(1.9em, 0.9em) rotate(-42deg);
-o-transform: translate(1.9em, 0.9em) rotate(-42deg);
transform: translate(1.9em, 0.9em) rotate(-42deg);
}
.playingCards.rotateHand ul.hand li:nth-child(2) {
-moz-transform: translate(1.5em, 0.5em) rotate(-33deg);
-webkit-transform: translate(1.5em, 0.5em) rotate(-33deg);
-o-transform: translate(1.5em, 0.5em) rotate(-33deg);
transform: translate(1.5em, 0.5em) rotate(-33deg);
}
.playingCards.rotateHand ul.hand li:nth-child(3) {
-moz-transform: translate(1.1em, 0.3em) rotate(-24deg);
-webkit-transform: translate(1.1em, 0.3em) rotate(-24deg);
-o-transform: translate(1.1em, 0.3em) rotate(-24deg);
transform: translate(1.1em, 0.3em) rotate(-24deg);
}
.playingCards.rotateHand ul.hand li:nth-child(4) {
-moz-transform: translate(0.7em, 0.2em) rotate(-15deg);
-webkit-transform: translate(0.7em, 0.2em) rotate(-15deg);
-o-transform: translate(0.7em, 0.2em) rotate(-15deg);
transform: translate(0.7em, 0.2em) rotate(-15deg);
}
.playingCards.rotateHand ul.hand li:nth-child(5) {
-moz-transform: translate(0.3em, 0.1em) rotate(-6deg);
-webkit-transform: translate(0.3em, 0.1em) rotate(-6deg);
-o-transform: translate(0.3em, 0.1em) rotate(-6deg);
transform: translate(0.3em, 0.1em) rotate(-6deg);
}
.playingCards.rotateHand ul.hand li:nth-child(6) {
-moz-transform: translate(-0.1em, 0.1em) rotate(3deg);
-webkit-transform: translate(-0.1em, 0.1em) rotate(3deg);
-o-transform: translate(-0.1em, 0.1em) rotate(3deg);
transform: translate(-0.1em, 0.1em) rotate(3deg);
}
.playingCards.rotateHand ul.hand li:nth-child(7) {
-moz-transform: translate(-0.5em, 0.2em) rotate(12deg);
-webkit-transform: translate(-0.5em, 0.2em) rotate(12deg);
-o-transform: translate(-0.5em, 0.2em) rotate(12deg);
transform: translate(-0.5em, 0.2em) rotate(12deg);
}
.playingCards.rotateHand ul.hand li:nth-child(8) {
-moz-transform: translate(-0.9em, 0.3em) rotate(21deg);
-webkit-transform: translate(-0.9em, 0.3em) rotate(21deg);
-o-transform: translate(-0.9em, 0.3em) rotate(21deg);
transform: translate(-0.9em, 0.3em) rotate(21deg);
}
.playingCards.rotateHand ul.hand li:nth-child(9) {
-moz-transform: translate(-1.3em, 0.6em) rotate(30deg);
-webkit-transform: translate(-1.3em, 0.6em) rotate(30deg);
-o-transform: translate(-1.3em, 0.6em) rotate(30deg);
transform: translate(-1.3em, 0.6em) rotate(30deg);
}
.playingCards.rotateHand ul.hand li:nth-child(10) {
-moz-transform: translate(-1.7em, 1em) rotate(39deg);
-webkit-transform: translate(-1.7em, 1em) rotate(39deg);
-o-transform: translate(-1.7em, 1em) rotate(39deg);
transform: translate(-1.7em, 1em) rotate(39deg);
}
.playingCards.rotateHand ul.hand li:nth-child(11) {
-moz-transform: translate(-2.2em, 1.5em) rotate(48deg);
-webkit-transform: translate(-2.2em, 1.5em) rotate(48deg);
-o-transform: translate(-2.2em, 1.5em) rotate(48deg);
transform: translate(-2.2em, 1.5em) rotate(48deg);
}
.playingCards.rotateHand ul.hand li:nth-child(12) {
-moz-transform: translate(-2.8em, 2.1em) rotate(57deg);
-webkit-transform: translate(-2.8em, 2.1em) rotate(57deg);
-o-transform: translate(-2.8em, 2.1em) rotate(57deg);
transform: translate(-2.8em, 2.1em) rotate(57deg);
}
.playingCards.rotateHand ul.hand li:nth-child(13) {
-moz-transform: translate(-3.5em, 2.8em) rotate(66deg);
-webkit-transform: translate(-3.5em, 2.8em) rotate(66deg);
-o-transform: translate(-3.5em, 2.8em) rotate(66deg);
transform: translate(-3.5em, 2.8em) rotate(66deg);
}
/* deck */
.playingCards ul.deck li:nth-child(1) {
left: 0;
bottom: 0;
}
.playingCards ul.deck li:nth-child(2) {
left: 2px;
bottom: 1px;
}
.playingCards ul.deck li:nth-child(3) {
left: 4px;
bottom: 2px;
}
.playingCards ul.deck li:nth-child(4) {
left: 6px;
bottom: 3px;
}
.playingCards ul.deck li:nth-child(5) {
left: 8px;
bottom: 4px;
}
.playingCards ul.deck li:nth-child(6) {
left: 10px;
bottom: 5px;
}
.playingCards ul.deck li:nth-child(7) {
left: 12px;
bottom: 6px;
}
.playingCards ul.deck li:nth-child(8) {
left: 14px;
bottom: 7px;
}
.playingCards ul.deck li:nth-child(9) {
left: 16px;
bottom: 8px;
}
.playingCards ul.deck li:nth-child(10) {
left: 18px;
bottom: 9px;
}
.playingCards ul.deck li:nth-child(11) {
left: 20px;
bottom: 10px;
}
.playingCards ul.deck li:nth-child(12) {
left: 22px;
bottom: 11px;
}
.playingCards ul.deck li:nth-child(13) {
left: 24px;
bottom: 12px;
}
.playingCards ul.deck li:nth-child(14) {
left: 26px;
bottom: 13px;
}
.playingCards ul.deck li:nth-child(15) {
left: 28px;
bottom: 14px;
}
.playingCards ul.deck li:nth-child(16) {
left: 30px;
bottom: 15px;
}
.playingCards ul.deck li:nth-child(17) {
left: 32px;
bottom: 16px;
}
.playingCards ul.deck li:nth-child(18) {
left: 34px;
bottom: 17px;
}
.playingCards ul.deck li:nth-child(19) {
left: 36px;
bottom: 18px;
}
.playingCards ul.deck li:nth-child(20) {
left: 38px;
bottom: 19px;
}
.playingCards ul.deck li:nth-child(21) {
left: 40px;
bottom: 20px;
}
.playingCards ul.deck li:nth-child(22) {
left: 42px;
bottom: 21px;
}
.playingCards ul.deck li:nth-child(23) {
left: 44px;
bottom: 22px;
}
.playingCards ul.deck li:nth-child(24) {
left: 46px;
bottom: 23px;
}
.playingCards ul.deck li:nth-child(25) {
left: 48px;
bottom: 24px;
}
.playingCards ul.deck li:nth-child(26) {
left: 50px;
bottom: 25px;
}
.playingCards ul.deck li:nth-child(27) {
left: 52px;
bottom: 26px;
}
.playingCards ul.deck li:nth-child(28) {
left: 54px;
bottom: 27px;
}
.playingCards ul.deck li:nth-child(29) {
left: 56px;
bottom: 28px;
}
.playingCards ul.deck li:nth-child(30) {
left: 58px;
bottom: 29px;
}
.playingCards ul.deck li:nth-child(31) {
left: 60px;
bottom: 30px;
}
.playingCards ul.deck li:nth-child(32) {
left: 62px;
bottom: 31px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment