La idea que quiero es tener un botón desplazado desde el padre para que cuando se haga clic en la tarjeta se voltee. Hice que la animación "flip card" funcionara en Chrome, pero en Safari (Mobile-IOS) parece haber un "fallo" con la animación en la que el botón se "corta" por un momento, lo que hace que la animación no se comporte como yo lo quiera (Funciona según lo previsto en Chrome). Agregué el prefijo "--webkit-" a las reglas de CSS que hicieron que la animación funcionara un poco. ¿Algo que me haya perdido?
window.onload = function() { FlipperBtns = document.getElementsByClassName('flipper'); Array.from(FlipperBtns).forEach(function(element) { element.addEventListener('click', function() { element.parentNode.getElementsByClassName('flip-container')[0].classList.toggle('is-flipped'); }, false); }); } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; } .flipping-frame-container { position: relative; margin: auto; margin-bottom: 15px; width: 300px; height: 300px; background-color: pink; border: orange solid 2px; } .flipper { width: 60px; height: 60px; background-color: blue; border-radius: 50%; position: absolute; bottom: -30px; right: -30px; border: orange solid 2px; z-index: 4; } .flip-container { display: inline-block; width: 100%; height: 100%; perspective: 1000; -webkit-perspective: 1000; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: 0.6s; -webkit-transition-delay: 60ms; position: relative; } .is-flipped .front { transform: rotateY(180deg); --webkit-transform: rotateY(180deg); backface-visibility: hidden; --webkit-backface-visibility: hidden; } .is-flipped .back { transform: rotateY(0deg); --webkit-transform: rotateY(0deg); } .front, .back { width: 100%; height: 100%; background-color: white; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: 0.6s; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; top: 0; left: 0; } .front { z-index: 2; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .back { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); } <div class="flipping-frame-container"> <div class="flipper"></div> <div class="flip-container"> <div class="front">Front</div> <div class="back">Back</div> </div> </div>