3D卡片展示 Tailwind网站组件

<section class="py-20 bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900"> <div class="max-w-6xl mx-auto px-4"> <h2 class="text-3xl font-bold text-center mb-16 text-white">科技产品</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="flip-card-c7d8e9f0 h-64"> <div class="flip-card-inner-c7d8e9f0"> <div class="flip-card-front-c7d8e9f0 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl p-6 flex flex-col justify-center items-center text-white"> <h3 class="text-2xl font-bold mb-4">智能家居</h3> <p class="text-center opacity-90">下一代智能控制系统</p> </div> <div class="flip-card-back-c7d8e9f0 bg-white rounded-xl p-6 flex flex-col justify-center"> <h3 class="text-xl font-bold mb-4 text-gray-900">产品特色</h3> <ul class="text-gray-700 space-y-2 text-sm"> <li>• 语音控制技术</li> <li>• 手机APP远程控制</li> <li>• 智能场景联动</li> <li>• 节能环保设计</li> </ul> <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">了解更多</button> </div> </div> </div> <div class="flip-card-c7d8e9f0 h-64"> <div class="flip-card-inner-c7d8e9f0"> <div class="flip-card-front-c7d8e9f0 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl p-6 flex flex-col justify-center items-center text-white"> <h3 class="text-2xl font-bold mb-4">新能源车</h3> <p class="text-center opacity-90">绿色出行新选择</p> </div> <div class="flip-card-back-c7d8e9f0 bg-white rounded-xl p-6 flex flex-col justify-center"> <h3 class="text-xl font-bold mb-4 text-gray-900">产品特色</h3> <ul class="text-gray-700 space-y-2 text-sm"> <li>• 续航里程500公里</li> <li>• 快速充电技术</li> <li>• 智能驾驶辅助</li> <li>• 零排放环保</li> </ul> <button class="mt-4 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">了解更多</button> </div> </div> </div> <div class="flip-card-c7d8e9f0 h-64"> <div class="flip-card-inner-c7d8e9f0"> <div class="flip-card-front-c7d8e9f0 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl p-6 flex flex-col justify-center items-center text-white"> <h3 class="text-2xl font-bold mb-4">VR设备</h3> <p class="text-center opacity-90">沉浸式虚拟体验</p> </div> <div class="flip-card-back-c7d8e9f0 bg-white rounded-xl p-6 flex flex-col justify-center"> <h3 class="text-xl font-bold mb-4 text-gray-900">产品特色</h3> <ul class="text-gray-700 space-y-2 text-sm"> <li>• 4K高清显示</li> <li>• 120Hz刷新率</li> <li>• 6DOF追踪技术</li> <li>• 轻量化设计</li> </ul> <button class="mt-4 bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">了解更多</button> </div> </div> </div> </div> </div> </section> <style>
.flip-card-c7d8e9f0 {
                perspective: 1000px;
            }
            .flip-card-inner-c7d8e9f0 {
                position: relative;
                width: 100%;
                height: 100%;
                text-align: center;
                transition: transform 0.6s;
                transform-style: preserve-3d;
            }
            .flip-card-c7d8e9f0:hover .flip-card-inner-c7d8e9f0 {
                transform: rotateY(180deg);
            }
            .flip-card-front-c7d8e9f0, .flip-card-back-c7d8e9f0 {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }
            .flip-card-back-c7d8e9f0 {
                transform: rotateY(180deg);
            }
</style>