localisation actuelle: Maison > Télécharger > Effets JS > Effets spéciaux CSS3 > Extension de cartes à jouer CSS3 et effets spéciaux d'animation pliables
Extension de cartes à jouer CSS3 et effets spéciaux d'animation pliables
Classer: Effets JS / Effets spéciaux CSS3 | Temps de libération: 2017-12-12 | visites: 2319 |
Télécharger: 53 |
Derniers téléchargements
Aquarium Fantastique
Filles en première ligne
Ailes d'étoiles
Petite Fée des Fleurs Paradis Féérique
Restaurant Histoire mignonne
Exploration de voyage à Shanhe
Amour et producteur
Le cerveau le plus puissant 3
Odd Dust : Damila
Jeune voyage vers l'Ouest 2
24 heuresClassement de lecture
- 1 Comment puis-je implémenter la troncature des points de suspension dans un élément de texte redimensionnable ?
- 2 diskmsg.dll – Qu'est-ce que diskmsg.dll ?
- 3 dialupmanager.dll – Qu'est-ce que dialupmanager.dll ?
- 4 diagrpt.dll – Qu'est-ce que diagrpt.dll ?
- 5 Pourquoi une transition CSS avec facilité d'entrée et de sortie se comporte-t-elle en douceur au survol mais brusquement à la sortie de la souris ?
- 6 dicrhash.dll – Qu'est-ce que dicrhash.dll ?
- 7 Comment injecter des dépendances dans des objets auto-instanciés au printemps ?
- 8 Pourquoi PHP fait-il écho à « 2 » lors de l'ajout et de la concaténation d'entiers ?
- 9 Pourquoi mon application Java utilise-t-elle GMT au lieu du fuseau horaire de mon système d'exploitation et comment puis-je y remédier ?
- 10 Comment envoyer un ping efficace aux URL HTTP en Java : un guide complet
- 11 Pourquoi mon `std::fstream` ne parvient-il pas à créer un fichier ?
- 12 Comment se lier aux classes CSS dans les vues XML UI5 à l'aide de l'attribut « class » ?
- 13 Pourquoi la récupération de panique avec des variables locales ne modifie-t-elle pas les valeurs renvoyées dans Go ?
- 14 digiconf.dll – Qu'est-ce que digiconf.dll ?
- 15 Comment puis-je générer des diagrammes UML à partir de mes classes PHP existantes ?
Derniers tutoriels
-
- Aller au langage pratique GraphQL
- 1924 2024-04-19
-
- Premiers pas avec MySQL (Professeur Mosh)
- 1752 2024-04-07
-
- Mock.js | Axios.js | Json | Dix jours de cours de qualité
- 2564 2024-03-29
L'effet spécial d'extension et d'animation de pliage de carte à jouer CSS3 est un effet d'extension et d'animation de pliage de carte en clic produit par CSS3 SVG.
<!DOCTYPE html>
<html>
<tête>
<meta charset="UTF-8">
<title>css3 extension de cartes à jouer et effets spéciaux d'animation pliante</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
</tête>
<body><script src="/demos/googlegg.js"></script>
<div class="perspective">
<div class='card-container'>
<div class="message">Cliquez sur la carte à gauche</div>
<div class='card card-card1'>
<div class='card__face card__face--top'>
<span class='card__value'>
A
</span>
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
35F5C"></path>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
A
</span>
<span class='card__suit'>
<svg width="21px" height="16px" viewBox="0 0 21 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
<chemin d="M1.6440972,15.2434886 L19.7934028,15.2434886 L10.71875,1.39282802 L1.6440972,15.2434886 Z" id="Chemin-2" trait="#635F5C"></chemin>
</g>
</svg>
</span>
</div>
</div>
<div class='card card-card2'>
<div class='card__face card__face--top'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" trait="#A68385" transform="translate(10.035534, 10.071068) rotation(-315.000000) translation(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" largeur ="13.1923882" hauteur="13.1923882"></rect>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
K
</span>
<span class='card__suit'>
<svg width="20px" height="21px" viewBox="0 0 20 21" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="Rectangle-3" trait="#A68385" transform="translate(10.035534, 10.071068) rotation(-315.000000) translation(-10.035534, -10.071068) " x="3.43933983" y="3.47487373" largeur ="13.1923882" hauteur="13.1923882"></rect>
</g>
</svg>
</span>
</div>
</div>
<div class='card card-card3'>
<div class='card__face card__face--top'>
<span class='card__value'>
Q
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Ovale" Stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Ovale" Stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Ovale" Stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
Q
</span>
<span class='card__suit'>
<svg width="21px" height="18px" viewBox="0 0 21 18" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
<circle id="Ovale" Stroke="#635F5C" cx="4.5" cy="13.5" r="4"></circle>
<circle id="Ovale" Stroke="#635F5C" cx="10.5" cy="4.5" r="4"></circle>
<circle id="Ovale" Stroke="#635F5C" cx="16.5" cy="13.5" r="4"></circle>
</g>
</svg>
</span>
</div>
</div>
<div class='card card-card4'>
<div class='card__face card__face--top'>
<span class='card__value'>
J
</span>
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
<chemin d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Chemin-2" trait="#A68385" , 7.631510) rotation( -180.000000) traduire (-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
<div class='card__face card__face--btm'>
<span class='card__value'>
J
</span>
<span class='card__suit'>
<svg width="20px" height="16px" viewBox="0 0 20 16" crackée="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http: //www.w3.org/1999/xlink">
<g id="Page-1" Stroke="none" Stroke-width="1" fill="none" fill-rule="evenodd">
<chemin d="M0.925347203,14.7630198 L19.0746528,14.7630198 L10,0.912359268 L0.925347203,14.7630198 Z" id="Chemin-2" trait="#A68385" , 7.631510) rotation( -180.000000) traduire (-10.000000, -7.631510) "></path>
</g>
</svg>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src='js/jquery.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>
</corps>
</html>