HTML、CSS和jQuery：创建一个炫酷的3D翻转卡片

    
    
    
    



    

        

            

                
正面
            
            

                
背面
            
        
    

.card {
    width: 200px;
    height: 300px;
    perspective: 1000px;
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.card:hover .card-inner {
    transform: rotateY(180deg);
}

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

.card-front {
    transform: rotateY(0deg);
    background-color: #3498db;
}

.card-back {
    transform: rotateY(180deg);
    background-color: #e74c3c;
    color: #fff;
}

$(document).ready(function() {
    $('.card').click(function() {
        $(this).find('.card-inner').toggleClass('flip');
    });
});