仅用HTML+CSS不使用position absolute实现响应式翻转卡是否可行

核心实现逻辑 #

• 用grid布局实现正反面元素叠层，无需绝对定位，两个元素自动占据同一单元格，尺寸完全同步
• 移除display切换逻辑，仅用backface-visibility: hidden控制正反面显隐，避免元素重排导致的位移
• 容器采用视窗单位vw设置尺寸，自动随屏幕宽度缩放，正反面尺寸完全对齐

完整修改后代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <title>Document</title>
    <style>
        .flip_card_flex {
            display: grid;
        }
        /* 新增card基础样式，用grid做叠层容器，尺寸响应式 */
        .card {
            display: grid;
            width: 25vw;
            height: 25vw;
            cursor: pointer;
            border: none !important; /* 覆盖bootstrap默认卡片边框，可按需调整 */
        }
        .card_body {
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 1.5s ease;
            transform-origin: center center; /* 旋转中心固定在容器正中间，避免偏移 */
        }
        .card:hover .card_body,
        .card:focus .card_body {
            transform: rotateX(-180deg);
        }
        /* 正反面统一配置，放在同一grid单元格，自动重叠 */
        .card_front, .card_back {
            grid-area: 1 / 1 / 2 / 2;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            margin: 0; /* 清除p标签默认边距，避免尺寸错位 */
        }
        .card_front {
            object-fit: cover; /* 图片适配容器，不变形 */
        }
        .card_back {
            transform: rotateX(-180deg);
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
            overflow: auto; /* 文本过长时内部滚动，不撑破容器 */
        }
    </style>
</head>
<body>
<!-- Flip cards-->
<div class="Tech_Title row">
    <h2 class="fs-2">example</h2>
</div>
<div class="flip_card_flex row justify-content-evenly pt-5">
    <div class="card">
        <div class="card_body">
            <img class="card_front img-fluid" src="https://www.w3schools.com/css/img_5terre.jpg" alt="html5_logo">
            <p class="card_back text-dark bg-light">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempora perferendis consectetur, eos odit debitis rerum porro ad nobis quos velit.
            </p>
        </div>
    </div>
    <div class="card">
        <div class="card_body">
            <img class="card_front img-fluid" src="https://www.w3schools.com/css/img_forest.jpg" alt="css3_logo">
            <p class="card_back text-dark bg-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nam iste asperiores delectus molestiae a ducimus numquam sapiente, possimus quo. Eveniet, tempore adipisci saepe qui hic exercitationem ratione consectetur nostrum!</p>
        </div>
    </div>
</div>
</body>
</html>

关键修改说明 #

• 移除了所有display: none相关的切换逻辑，避免元素重排导致的hover位移
• 给.card添加grid布局，正反面元素通过grid-area强制放在同一单元格，无需position: absolute即可实现叠层，尺寸天然和容器同步
• 旋转中心固定在容器正中心，翻转动画全程无偏移
• 容器尺寸用25vw设置，随屏幕宽度自动缩放，正反面尺寸完全匹配图片尺寸
• 图片添加object-fit: cover避免拉伸变形，背面文本添加overflow: auto适配长文本场景

内容的提问来源于stack exchange，提问作者William