Карточный флип, кеширование изображений

Question

Я пытаюсь создать простую игру на запоминание и использую одно и то же изображение на всех оборотах и ​​разные изображения на лицевой стороне.

У меня почти все работает так, как я хотел, но проблема в том, что я есть то, что когда я нажимаю на «неперевёрнутую» карточку, обратное изображение сразу же зеркально отражается перед началом вращения. Или изображение frontside загружается непосредственно перед тем, как анимация переворачивает карту.

И если я попытаюсь добавить «border-radius» к «.front .back», то вся анимация будет удалена. И также похоже, что изображения исчезают и снова появляются в анимации. Есть ли проблемы с изображениями, которые не кэшируются и не загружаются повторно каждый раз, когда я переворачиваю карту?

card. css

.flip-container {
  perspective: 1000px;
  margin: 15px;
  /*border: 5px solid black; */
}

.flip-container.flipped .flipper {
  transform: rotateY(180deg);
}

.flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.front,
.back {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: 10px;
}

.back {
  z-index: 1;
  /* for firefox 31 */
  transform: rotateY(0deg);

}

.front {
  transform: rotateY(180deg);
}

card.jsx

import React from 'react'
import propTypes from 'prop-types'

import './card.css'

export default function Card({
    handleClick,
    id,
    type,
    flipped,
    height,
    width,
    disabled,
    solved,
    currentTheme
}) {
    const baseUrl = `/images/${currentTheme}/`
    const backFaceUrl = "/memory-bf/logga.png"
    return (
        <div
            className={`flip-container ${flipped ? 'flipped' : ''}`}
            style={{
                width, height
            }}
            onClick={() => disabled ? null : handleClick(id)}
        >
            <div className="flipper">
                <img
                    style={{ height, width }}
                    className={flipped ? 'front' : 'back'}
                    src={flipped || solved? `${baseUrl}${type}` : backFaceUrl}
                    alt={"bild"}
                />
            </div>
        </div>
    )
}
//Javascript-objekt
Card.propTypes = {
    disabled: propTypes.bool.isRequired,
    handleClick: propTypes.func.isRequired,
    id: propTypes.number.isRequired,
    flipped: propTypes.bool.isRequired,
    solved: propTypes.bool.isRequired,
    type: propTypes.string.isRequired,
    height: propTypes.number.isRequired,
    width: propTypes.number.isRequired
}