Having trouble in rotating the box

HTML-CSS
1

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div class="flipping">
    <div class="flipping-inside">
        <div class="flipping-front">
            <h1>Welcome!</h1>
        </div>
        <div class="flipping-back">
            <h1>Welcome again!</h1>
        </div>
    </div>
</div>
</body>
</html>

style.css


body {
    font-family: Arial, Helvetica, sans-serif;
}
 /*flipping-back
flipping-front
flipping-inside
flipping */

.flipping {
    background-color: transparent;
    border: 1px solid gray;
    width: 500px;
    height: 300px;
    perspective: 1000px;
}

.flipping-inside {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flipping:hover, .flipping-inside {
    transform: rotateY(180deg);
}

.flipping-back, .flipping-front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flipping-front {
    background-color: #9370d8;
    color: #4b0082;
}

.flipping-back {
    background-color: #0a1838;
    color: wheat;
    transform: rotateY(180deg);
}
2

Front Side

Back Side

body { font-family: Arial, Helvetica, sans-serif; } .flip-box { background-color: transparent; width: 500px; height: 300px; border: 1px solid #f1f1f1; perspective: 1000px; } .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-box-front, .flip-box-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { background-color: #bbb; color: black; } .flip-box-back { background-color: dodgerblue; color: white; transform: rotateY(180deg); }

try this