Pure CSS to achieve poker effect_Layout and layers

This can also be achieved using CSS! For the convenience of demonstration, JavaScript code is used here to control the switching of playing cards, which is quite good.

<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Playing Cards with CSS3!</title> <style type="text/css"> body { background: #DDDDDD; overflow: hidden; } body .fire { color: #FF0000; } p { background: #FFFFFF; border: 1px solid #CCCCCC; border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); font-size: 25px; text-align: center; height: 30px; width: 600px; margin: -35px -300px; padding: 10px 15px; position: absolute; bottom: 50px; left: 50%; z-index: 99; } ul { background: #FFFFFF; border: 1px solid #CCCCCC; background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); font-size: 50px; margin: 0; padding: 0 15px; position: absolute; right: 20px; top: 15px; z-index: 99; } ul li { display: inline; list-style-type: none; } ul li a { color: #000000; display: block; float: left; padding: 0 10px; text-decoration: none; } .base { background: #FFFFFF; border: 1px solid #CCCCCC; color: #000000; background:-moz-linear-gradient(top, #FFFFFF, #DDDDDD); background:-webkit-gradient(linear,0 0, 0 100%, from(#FFFFFF), to(#DDDDDD)); border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 5px 5px 5px #CCCCCC; -webkit-box-shadow: 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px #CCCCCC; filter: progid:DXImageTransform.Microsoft.Shadow(color='#CCCCCC', Direction=135, Strength=5); height: 360px; top: 50%; margin-top: -180px; width: 260px; left: 50%; margin-left: -130px; z-index: 9; cursor: pointer; font-size: 50px; text-decoration: none; padding: 15px 0 0 25px; position: absolute; } strong { font-size: 250px; position: absolute; left: 50%; top: 50%; margin-top: -160px; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.4)), to(rgba(0,0,0,1))); } em { font-size: 40px; font-style: normal; display: block; margin-bottom: -15px; } label span { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); position: absolute; bottom: 15px; right: 25px; } #spades strong { margin-left: -68px; } #spades em { margin-left: 0; } #hearts strong { margin-left: -70px; } #hearts em { margin-left: 1px; } #clubs strong { margin-left: -80px; } #clubs em { margin-left: 3px; } #diamonds strong { margin-left: -60px; } #diamonds em { margin-left: -2px; } fieldset { display: none; } fieldset:target { display: block; } fieldset:target .card label { -webkit-animation-name: scaler; -webkit-animation-duration: 1.75s; -webkit-animation-iteration-count: 1; } fieldset:target .card:checked label { -webkit-animation-name: effectx; -webkit-animation-duration: 3s; -webkit-transform: scale(0); } .close { background: #DDDDDD; cursor: default; left: 0; top: 0; position: absolute; height: 100%; width: 100%; z-index: 1; text-indent: -999em; } @-webkit-keyframes scaler { from { -webkit-transform: scale(0); } to { -webkit-transform: scale(1); } } @-webkit-keyframes effectx { from { -webkit-transform: rotateX(0deg); } to { -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(500px) rotate(180deg); -webkit-animation-duration: 30s; } }</style> <ul> <li> <a title="Select Spades" href="#spades"></a>♠</li> <li> <a class="fire" title="Select Hearts" href="#hearts"></a>♥</li> <li> <a title="Select Clubs" href="#clubs"></a>♣</li> <li> <a class="fire" title="Select Diamonds" href="#diamonds"></a>♦</li> </ul> <form action=""> <fieldset id="spades"> <input class="card" id="spade" type="radio" name="spade" value="spade"><label class="base" for="spade" title="This is the Ace of Spades!"><span><em></em>A</span>♠<strong></strong>♠<em></em>A</label>♠<input id="cancel1" type="reset" name="spade" value="cancel" checked><label class="close" for="cancel1"></label>Spades</fieldset> <fieldset id="hearts"> <input class="card" id="heart" type="radio" name="heart" value="heart"><label class="base fire" for="heart" title="This is the Ace of Hearts!"><span><em></em>A</span>♥<strong></strong>♥<em></em>A</label>♥<input id="cancel2" type="reset" name="heart" value="cancel" checked><label class="close" for="cancel2"></label>Hearts</fieldset> <fieldset id="clubs"> <input class="card" id="club" type="radio" name="club" value="club"><label class="base" for="club" title="This is the Ace of Clubs!"><span><em></em>A</span>♣<strong></strong>♣<em></em>A</label>♣<input id="cancel3" type="reset" name="club" value="cancel" checked><label class="close" for="cancel3"></label>Clubs</fieldset> <fieldset id="diamonds"> <input class="card" id="diamond" type="radio" name="diamond" value="diamond"><label class="base fire" for="diamond" title="This is the Ace of Diamonds!"><span><em></em>A</span>♦<strong></strong>♦<em></em>A</label>♦<input id="cancel4" type="reset" name="diamond" value="cancel" checked><label class="close" for="cancel4"></label>Diamonds</fieldset> </form> <p> </p>Select an option above to change the suit displayed!
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]