如何使这段代码相对布局但位置不发生偏移

Question

如何使这段代码相对布局但位置不发生偏移

.card {
            margin: auto;
            width: 300px;
            height: 400px;
            perspective: 1000px;
            background-color: transparent;
        }
 
        .card__content {
            display: flex;
            /* position:relative; */
            width: 100%;
            height: 100%;
            text-align: center;
            transition: all 1s;
            transform-style: preserve-3d;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
        }
 
        .card:hover .card__content {
            transform: rotateY(180deg);
        }
 
        .card__front,
        .card__back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
 
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
 
        .card__front {
            background-color: blue;
            width: 300px;
            margin-left: 60px;
            margin-top: 10px;
        }
 
        .card__back {
            background-color: blue;
            transform: rotateY(180deg);
            font-size: 15px;
        }
 
        .card2 {
            margin: auto;
            width: 300px;
            height: 400px;
            perspective: 1000px;
            background-color: transparent;
        }
 
        .card2__content {
            /* display: flex; */
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: all 1s;
            transform-style: preserve-3d;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
            margin-left: 500px;
            /* margin-top: -90px; */
        }
 
        .card2:hover .card2__content {
            transform: rotateY(180deg);
        }
 
        .card2__front,
        .card2__back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
 
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
 
        .card2__front {
            background-color: blue;
            font-size: 70px;
            width: 300px;
            /* margin-left: 460px;
    margin-top: -390px;  */
        }
 
        .card2__back {
            background-color: blue;
            transform: rotateY(180deg);
            font-size: 20px;
        }
 
        #img {
            width: 200px;
            height: 300px;
        }
 
        #img2 {
            width: 250px;
            height: 350px;
        }
 
        .card3 {
            margin: auto;
            width: 300px;
            height: 400px;
            perspective: 1000px;
            background-color: transparent;
        }
 
        .card3__content {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: all 1s;
            transform-style: preserve-3d;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
            margin-left: 900px;
            margin-top: -400px;
        }
 
        .card3:hover .card3__content {
            transform: rotateY(180deg);
        }
 
        .card3__front,
        .card3__back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
 
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
 
        .card3__front {
            background-color: blue;
            font-size: 70px;
            width: 300px;
 
        }
 
        .card3__back {
            background-color: blue;
            transform: rotateY(180deg);
            font-size: 20px;
        }
 
 
        .card4 {
            margin: auto;
            width: 300px;
            height: 400px;
            perspective: 1000px;
            background-color: transparent;
        }
 
        .card4__content {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: all 1s;
            transform-style: preserve-3d;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
            margin-left: 1300px;
            margin-top: -400px;
        }
 
        .card4:hover .card4__content {
            transform: rotateY(180deg);
        }
 
        .card4__front,
        .card4__back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
 
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
        }
 
        .card4__front {
            background-color: blue;
 
            width: 300px;
            /* margin-left: 460px;
    margin-top: -390px;  */
        }
 
        .card4__back {
            background-color: blue;
            transform: rotateY(180deg);
            font-size: 20px;
        }
    </style>
</head>

Answer 1

额，这种还是远程好