.conteneurFlip { position: relative; z-index: 2; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; perspective: 1000px; -webkit-perspective: 1000px; width: 100%; } .rectoFlip,.versoFlip { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; -ms-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .rectoFlip { text-align: center; -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .versoFlip { padding: 15px; -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .txtVerso,.txtRecto { transform: translateY(0%) translateZ(60px) scale(0.9399999999999999); -webkit-transform: translateY(0%) translateZ(60px) scale(0.9399999999999999); -ms-transform: translateY(0%) translateZ(60px) scale(0.9399999999999999); } .conteneurFlip:hover .rectoFlip { -ms-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .conteneurFlip:hover .versoFlip { -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; }