{"id":1233,"date":"2024-05-07T09:53:06","date_gmt":"2024-05-07T08:53:06","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1233"},"modified":"2024-11-05T14:55:43","modified_gmt":"2024-11-05T13:55:43","slug":"flip-card-css","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2024\/05\/07\/flip-card-css\/","title":{"rendered":"Une flip card en CSS"},"content":{"rendered":"\n

Vous avez toujours voulu savoir comment cr\u00e9er un effet de carte retourn\u00e9e (flip card<\/em> en anglais) ? Cet article est ce qu\u2019il vous faut !<\/p>\n\n\n\n

Le r\u00e9sultat final est disponible ici<\/a>.<\/p>\n\n\n\n

Structure HTML<\/h2>\n\n\n\n

Pour commencer, attaquons nous \u00e0 la structure HTML d\u2019une carte.<\/p>\n\n\n\n

Pour sch\u00e9matiser, une carte se d\u00e9compose comme ceci : un cadre, qui contient une planche sur les faces de laquelle il y a ce que l\u2019on veut afficher, et au survol de la souris, on fait pivoter cette planche interne.<\/p>\n\n\n\n

Cela nous donne la structure HTML suivante :<\/p>\n\n\n

\n<div class="card">\n  <div class="card_inner">\n    <div class="card_face card_back"><\/div>\n    <div class="card_face card_front"><h2>Don't worry<\/h2><p>Be happy<\/p><\/div>\n  <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
La classe .card<\/code>, repr\u00e9sente le cadre, la classe .card_inner<\/code> la planche et la classe .card_face<\/code> les deux faces de cette planche (avec \u00e9galement une classe diff\u00e9rente pour chaque face.<\/p>\n\n\n\n\n\n\n\n
Le CSS<\/h2>\n\n\n\n
Concernant la cadre rien de bien compliqu\u00e9, \u00e0 part la propri\u00e9t\u00e9 perpespective, qui permet d\u2019indiquer la distance \u00e0 laquelle se trouve la \u201ccam\u00e9ra\u201d pendant les effets 3D. Plus cette valeur est petite, plus les \u00e9l\u00e9ments occuperont de place \u00e0 l\u2019\u00e9cran.<\/p>\n\n\n
\n.card {\n  width: 200px;\n  height: 200px;\n  perspective: 1000px;\n  font-family: sans-serif;\n}\n<\/pre><\/div>\n\n\n
Pour la planche, on utilise ces propri\u00e9t\u00e9s :<\/p>\n\n\n
\n.card_inner {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  transition: rotate .75s ease-in-out;\n  transform-style: preserve-3d;\n}\n<\/pre><\/div>\n\n\n
La position est relative pour permettre de placer les deux faces l\u2019une sur l\u2019autre.<\/p>\n\n\n\n
La propri\u00e9t\u00e9 transform-style<\/a><\/code> est l\u00e0 pour indiquer de pr\u00e9server la 3D lors des transitions.<\/p>\n\n\n\n
Pour les deux faces:<\/p>\n\n\n
\n.card_face {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  backface-visibility: hidden;\n}\n<\/pre><\/div>\n\n\n
backface-visibility<\/code><\/a> permet de cacher le dos d\u2019un \u00e9l\u00e9ment si celui-ci ne nous fait plus face.<\/p>\n\n\n\n
Pour le dos de la carte (ce qu\u2019on voit si la souris ne survole pas notre carte), mon exemple utilise ce style (qui peut \u00eatre compl\u00e9ment diff\u00e9rent chez vous) :<\/p>\n\n\n
\n.card_back {\n  background-image: url('https:\/\/picsum.photos\/id\/823\/200');\n  background-position: center;\n  background-size: cover;\n}\n<\/pre><\/div>\n\n\n
Et pour la face, j\u2019utilise \u00e7a :<\/p>\n\n\n
\n.card_front {\n  background-color: rgb(35 15 12);\n  color: lightgoldenrodyellow;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  rotate: y 180deg;\n}\n<\/pre><\/div>\n\n\n
Le seul \u00e9l\u00e9ment vraiment important pour l\u2019effet recherch\u00e9 \u00e9tant la propri\u00e9t\u00e9 rotate<\/code><\/a>.<\/p>\n\n\n\n
De nombreux exemples de flip card sur le net utilisent la propri\u00e9t\u00e9 transform<\/code><\/a>, et la fonction rotateY()<\/code><\/a>. Cette mani\u00e8re de faire fonctionne tr\u00e8s bien, mais a l\u2019\u201dincov\u00e9nient\u201d d\u2019\u00eatre cumulative (par exemple, si vous appliquez une rotation suivie d\u2019une translation sur l\u2019axe X, cet axe X n\u2019est plus \u00e0 l\u2019horizontale mais aura suivi la rotation), ce qui peut mener \u00e0 un v\u00e9ritable casse-t\u00eate pour ordonner les diff\u00e9rentes transformations pour parvenir au r\u00e9sultat escompt\u00e9.<\/p>\n\n\n\n
Toutes les diff\u00e9rentes transformations sont maintenant appliquables avec leur propre propri\u00e9t\u00e9.<\/p>\n\n\n\n
Et pour terminer :<\/p>\n\n\n
\n.card:hover .card_inner {\n  rotate: y 180deg;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
Vous avez toujours voulu savoir comment cr\u00e9er un effet de carte retourn\u00e9e (flip card en anglais) ? Cet article est ce qu\u2019il vous faut ! Le r\u00e9sultat final est disponible ici. Structure HTML Pour commencer, attaquons nous \u00e0 la structure … Continuer la lecture →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[53],"tags":[30,29],"class_list":["post-1233","post","type-post","status-publish","format-standard","hentry","category-css","tag-css","tag-html"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-jT","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":10,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/06\/un-dancefloor-en-jquery\/","url_meta":{"origin":1233,"position":0},"title":"Un dancefloor en jQuery","author":"geekc","date":"06\/09\/2012","format":false,"excerpt":"Aujourd'hui, je vais vous expliquer comment cr\u00e9er en jQuery un effet de dancefloor \u00e0 la Saturday Night Fever (demo). Tout d'abord, de quoi est compos\u00e9 un tel \u00ab plancher de danse \u00bb ? Tout simplement de diff\u00e9rents carr\u00e9s\/cases, le tout contenu dans une surface d\u00e9finie. Ici le dancefloor sera une\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":334,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/04\/11\/comment-marche-html\/","url_meta":{"origin":1233,"position":1},"title":"Comment marche le HTML ?","author":"geekc","date":"11\/04\/2014","format":false,"excerpt":"Comme vu pr\u00e9c\u00e9demment le HTML est un des piliers du Web. Nous allons voir ici comment \u00e7a marche. Les balises La base du HTML est le principe de balises. Une balise est l\u00e0 pour d\u00e9limiter une zone. en HTML, une balise s'\u00e9crit \u00e0 l'aide de chevrons; exemple: 
. En HTML,\u2026","rel":"","context":"Dans "Pour les nuls"","block_context":{"text":"Pour les nuls","link":"https:\/\/geekcommunicant.com\/blog\/category\/pour-les-nuls\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":790,"url":"https:\/\/geekcommunicant.com\/blog\/2019\/05\/20\/carte-interactive-svg-tooltip\/","url_meta":{"origin":1233,"position":2},"title":"Carte interactive en SVG avec tooltip","author":"geekc","date":"20\/05\/2019","format":false,"excerpt":"Apr\u00e8s la premi\u00e8re version de ma carte interactive (voir ici), j\u2019en ai cr\u00e9\u00e9 une deuxi\u00e8me \u00e0 l\u2019aide de la librairie OpenLayers. Cette solution fonctionne, mais c\u2019est comme disposer d'un outil multifonction mais d'en n'utiliser qu'une ou deux, OpenLayers \u00e9tant une librairie permettant de faire beaucoup plus. Une autre solution un\u2026","rel":"","context":"Dans "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/geekcommunicant.com\/blog\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/svg-map-style.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":171,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/18\/jquery-une-fenetre-modale\/","url_meta":{"origin":1233,"position":3},"title":"[jQuery] Une fen\u00eatre modale","author":"geekc","date":"18\/10\/2012","format":false,"excerpt":"Bonjour \u00e0 tous, aujourd'hui nous allons voir comment r\u00e9aliser une fen\u00eatre modale en jQuery. Qu'est-ce que c'est ? Wikip\u00e9dia donne la d\u00e9finition suivante: Une fen\u00eatre modale est, dans une interface graphique, une fen\u00eatre qui prend le contr\u00f4le total du clavier et de l'\u00e9cran. Elle est en g\u00e9n\u00e9ral associ\u00e9e \u00e0 une\u2026","rel":"","context":"Dans "jQuery"","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326,"url":"https:\/\/geekcommunicant.com\/blog\/2014\/04\/06\/comment-marche-le-web\/","url_meta":{"origin":1233,"position":4},"title":"Comment marche le Web ?","author":"geekc","date":"06\/04\/2014","format":false,"excerpt":"Vous vous \u00eates toujours demand\u00e9 quelle diff\u00e9rence il pouvait y avoir entre le HTML et le PHP, entre le CSS et le JavaScript ? Cet article est fait pour vous. Apr\u00e8s l'avoir lu, vous serez incollables, ou presque, sur les technologies du Web. HTML et CSS Le HTML est la\u2026","rel":"","context":"Dans "Pour les nuls"","block_context":{"text":"Pour les nuls","link":"https:\/\/geekcommunicant.com\/blog\/category\/pour-les-nuls\/"},"img":{"alt_text":"HTML, CSS, et JavaScript","src":"https:\/\/i0.wp.com\/geekcommunicant.com\/blog\/wp-content\/uploads\/logo_html5-300x175.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":1050,"url":"https:\/\/geekcommunicant.com\/blog\/2022\/12\/30\/gloubi-tuto-menu-interactif-deroulant\/","url_meta":{"origin":1233,"position":5},"title":"Gloubi tuto – menu interactif d\u00e9roulant","author":"geekc","date":"30\/12\/2022","format":false,"excerpt":"Cette semaine, attaquons-nous \u00e0 un autre script de menu pr\u00e9sent\u00e9 chez notre gloubi adversaire. Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes. Fonctionnement Le menu produit par ce script se pr\u00e9sente sous la forme d\u2019un tableau dans un tableau (je parle l\u00e0 des\u2026","rel":"","context":"Dans "CSS"","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1233"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1233\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1233"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1233"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}