延续之前的我的设备：https://www.dalao.net/thread-30922.htm

加了个卡片在后面，点击可以翻转

可以去掉背景图显得高端一点：

demo：https://dai.ge/about.php

CSS部分

/* 卡片组容器 */
.ka-card-group {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.ka-card-wrapper {
    width: 50%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
}

@media screen and (max-width: 740px) {
    .ka-card-wrapper {
        width: 100%;
    }
}

.ka-card-container {
    width: 320px;
    height: 180px;
    perspective: 1000px;
    position: relative;
    user-select: none;
    margin: 0 auto;
}

.ka-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 8px;
    cursor: grab;
}

.ka-card:active {
    cursor: grabbing;
}

/* 卡片正面和背面 */
.ka-card-front,
.ka-card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.ka-card-front {
    background-color: #000000;
    color: #fff;
    font-family: "Microsoft Yahei", sans-serif;
    padding: 15px 20px;
    transform: rotateY(0deg);
}

.ka-card-back {
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateY(180deg);
}

/* 卡片背面居中的logo */
.ka-card-back-logo {
    width: 150px;
    height: auto;
    filter: invert(100%);
    border-radius: 0;
    border: none;
}

/* 顶部：运营商+价格 */
.ka-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ka-logo {
    width: 80px;
    border-radius: 0;
    border: none;
    filter: invert(100%);
}

.ka-price {
    font-size: 18px;
    font-weight: bold;
}

/* 中间：大标题 - 靠右对齐且斜体 */
.ka-card-title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 9.5px 0;
}

.ka-sim-image {
    width: 50px;
    height: 50px;
    border-radius: 0;
    border: none;
}

.ka-card-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    text-align: right;
    font-style: italic;
}

/* 底部：权益标签+小图标 */
.ka-benefits {
    display: flex;
    flex-direction: column;
}

.ka-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.ka-tag {
    background-color: #ffffff;
    color: #000;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.ka-bottom-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.ka-icons {
    display: flex;
    gap: 8px;
}

.ka-icons img {
    width: 22px;
    border-radius: 0;
    border: none;
}

.ka-desc {
    font-size: 13px;
    opacity: 0.9;
    color: #fff;
}

.ka-card-back-cu-logo {
    width: 150px;
    height: auto;
    border-radius: 0;
    border: none;
}

.ka-card-title-container-cu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 9.5px 0;
}

.ka-logo-cu {
    width: 80px;
    border-radius: 0;
    border: none;
}

HTML部分：

<div class="equipment-item-content">
    <div class="equipment-item-content-item" style="width: 100%; border: none; box-shadow: none;">
        <div class="ka-card-group">
            <!-- 第一张卡 -->
            <div class="ka-card-wrapper">
                <div class="ka-card-container">
                    <div class="ka-card" id="ka-card1">
                        <!-- 卡片正面 -->
                        <div class="ka-card-front" style="background: url(/img/d3x.png) 0 0 no-repeat; background-size: cover;">
                            <div class="ka-card-header">
                                <img src="/img/189.png" alt="中国电信" class="ka-logo">
                                <div class="ka-price">29元/月</div>
                            </div>
                            <div class="ka-card-title-container">
                                <img src="/img/sim-min.png" alt="SIM卡" class="ka-sim-image">
                                <div class="ka-card-title">流量任性用&nbsp;</div>
                            </div>
                            <div class="ka-benefits">
                                <div class="ka-tags">
                                    <div class="ka-tag">1000分钟通话</div>
                                    <div class="ka-tag">不限量不限速</div>
                                </div>
                                <div class="ka-bottom-section">
                                    <div class="ka-icons">
                                        <img src="/img/phone.png" alt="通话">
                                        <img src="/img/流量.png" alt="流量">
                                        <img src="/img/短信.png" alt="短信">
                                    </div>
                                    <div class="ka-desc">山楂卡·官宣双不限套餐</div>
                                </div>
                            </div>
                        </div>
                        <!-- 卡片背面 -->
                        <div class="ka-card-back" style="background: url(/img/d3x.png) 0 0 no-repeat; background-size: cover;">
                            <img src="/img/189.png" alt="中国电信" class="ka-card-back-logo">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 第二张卡 -->
            <div class="ka-card-wrapper">
                <div class="ka-card-container">
                    <div class="ka-card" id="ka-card2">
                        <!-- 卡片正面 -->
                        <div class="ka-card-front" style="background: url(/img/bgcu.png) 0 0 no-repeat; background-size: cover;">
                            <div class="ka-card-header">
                                <img src="/img/Chinau.png" alt="中国联通" class="ka-logo-cu">
                                <div class="ka-price">19元/月</div> 
                            </div>
                            <div class="ka-card-title-container-cu">
                                <img src="/img/sim-min.png" alt="SIM卡" class="ka-sim-image">
                                <div class="ka-card-title">优享5G速率&nbsp;</div> 
                            </div>
                            <div class="ka-benefits">
                                <div class="ka-tags">
                                    <div class="ka-tag">500分钟通话</div> 
                                    <div class="ka-tag">240GB流量</div> 
                                </div>
                                <div class="ka-bottom-section">
                                    <div class="ka-icons">
                                        <img src="/img/phone.png" alt="通话">
                                        <img src="/img/流量.png" alt="流量">
                                        <img src="/img/短信.png" alt="短信">
                                    </div>
                                    <div class="ka-desc">吉联卡·官方永久套餐</div> 
                                </div>
                            </div>
                        </div>
                        <!-- 卡片背面 -->
                        <div class="ka-card-back" style="background: url(/img/bgcu.png) 0 0 no-repeat; background-size: cover;">
                            <img src="/img/Chinau.png" alt="中国联通" class="ka-card-back-cu-logo">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        <script>
    // 初始化两个卡片
    const cards = document.querySelectorAll('.ka-card');
    
    cards.forEach((card, index) => {
        const cardContainer = card.closest('.ka-card-container');
        let isDragging = false;
        let startX, startY;
        let currentRotationY = 0;
        let isFlipped = false;
        
        // 鼠标/触摸事件处理
        function handleStart(e) {
            isDragging = true;
            startX = e.clientX || e.touches[0].clientX;
            startX = startX - cardContainer.getBoundingClientRect().left;
            card.style.transition = 'none';
        }
        
        function handleMove(e) {
            if (!isDragging) return;
            const clientX = e.clientX || e.touches[0].clientX;
            const x = clientX - cardContainer.getBoundingClientRect().left;
            const deltaX = x - startX;
            const rotateY = currentRotationY + (deltaX / cardContainer.offsetWidth) * 180;
            card.style.transform = `rotateY(${rotateY}deg)`;
            e.preventDefault();
        }
        
        function handleEnd() {
            if (!isDragging) return;
            isDragging = false;
            const transform = card.style.transform;
            const rotateYMatch = transform.match(/rotateY\(([^)]+)\)/);
            currentRotationY = rotateYMatch ? parseFloat(rotateYMatch[1]) : 0;
            isFlipped = Math.abs(currentRotationY) > 90;
            card.style.transition = 'transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
            
            if (isFlipped) {
                card.style.transform = 'rotateY(180deg)';
                currentRotationY = 180;
            } else {
                card.style.transform = 'rotateY(0deg)';
                currentRotationY = 0;
            }
        }
        
        function handleClick() {
            if (isDragging) return;
            isFlipped = !isFlipped;
            card.style.transition = 'transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)';
            
            if (isFlipped) {
                card.style.transform = 'rotateY(180deg)';
                currentRotationY = 180;
            } else {
                card.style.transform = 'rotateY(0deg)';
                currentRotationY = 0;
            }
        }
        
        // 绑定事件
        cardContainer.addEventListener('mousedown', handleStart);
        document.addEventListener('mousemove', handleMove);
        document.addEventListener('mouseup', handleEnd);
        cardContainer.addEventListener('click', handleClick);
        
        cardContainer.addEventListener('touchstart', handleStart, { passive: false });
        document.addEventListener('touchmove', handleMove, { passive: false });
        document.addEventListener('touchend', handleEnd);
        
        document.addEventListener('selectstart', function(e) {
            if (isDragging) e.preventDefault();
        });
    });
</script>
    </div>
</div>

图标放到压缩包了，在/img/目录下解压即可。