مشکل در اجرای پروژه

سلام ، خسته نباشید

من از قطعه کد‌های زیر برای این پروژه استفاده کرده ام

اما متاسفانه فلیپ کارت من درست نشد!!!!!

لطفا ارهنمایی کنید و در صورت امکان قطعه کد خودتان را هم برای بررسی ارسال کنید

<!DOCTYPE html>
<html>
    <div class="filipcard">
        <div class="flipinner">
            <div class="front">
                <p>1محتوای ظاهری</p>
            </div>
            <div class="back">
                <p>2محتوای ظاهری</p>
            </div>
        </div>
    </div>
</html>
<style>
    .filipcard{
        width: 300px;
        height: 300px;
        /*برای بعد دادن به فلیپ کارت:*/
        perspective: 800px;
    }
    .filipinner{
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 2s;
        transform-style: preserve-3d;
    }
    .filipcard:hover .filipinner{
        transform: rotateY(180deg);
    }
    .front{
        background-color: aqua;
        transform: rotateY(180deg);
    }
    .back{
        background-color: rgb(82, 82, 82);
    }
    .back , .front{
        position: absolute;
        width: 300px;
        height: 300px;
        backface-visibility: hidden;
    }
</style>