CSS3旋转动画产品列表

原创已于 2025-06-27 15:19:40 修改 · 830 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-05 16:28:33 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3旋转动画产品列表</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 40px 20px;
}

.header {
text-align: center;
margin-bottom: 40px;
}

.header h1 {
font-size: 2.5rem;
color: #333;
margin-bottom: 10px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.header p {
color: #666;
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}

.header a {
color: #4a6baf;
text-decoration: none;
}

.header a:hover {
text-decoration: underline;
}

.products-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}

.product-card {
width: 280px;
height: 380px;
perspective: 1000px;
cursor: pointer;
}

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

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

.product-front, .product-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.product-front {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}

.product-image {
width: 180px;
height: 180px;
object-fit: contain;
margin-bottom: 20px;
transition: transform 0.3s;
}

.product-card:hover .product-front .product-image {
transform: scale(1.05);
}

.product-title {
font-size: 1.4rem;
color: #333;
margin-bottom: 10px;
text-align: center;
}

.product-price {
font-size: 1.5rem;
color: #4a6baf;
font-weight: bold;
}

.product-back {
background-color: #4a6baf;
color: white;
transform: rotateY(180deg);
padding: 25px;
display: flex;
flex-direction: column;
}

.product-back h3 {
font-size: 1.4rem;
margin-bottom: 15px;
text-align: center;
}

.product-description {
font-size: 0.95rem;
line-height: 1.5;
margin-bottom: 20px;
flex-grow: 1;
}

.product-button {
background-color: white;
color: #4a6baf;
border: none;
padding: 12px 20px;
border-radius: 30px;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
align-self: center;
}

.product-button:hover {
background-color: #f1f1f1;
transform: translateY(-2px);
}

.footer {
margin-top: 50px;
text-align: center;
color: #666;
font-size: 0.9rem;
}

@media (max-width: 768px) {
.product-card {
width: 250px;
height: 350px;
}

.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="header">
<h1>精选产品展示</h1>
<p>鼠标悬停在产品卡片上查看详情。</p>
</div>

<div class="products-container">

<div class="product-card">
<div class="product-inner">
<div class="product-front">
<img src="https://via.placeholder.com/180x180/4a6baf/ffffff?text=智能手表" alt="智能手表" class="product-image">
<h2 class="product-title">智能手表 Pro</h2>
<div class="product-price">¥1299</div>
</div>
<div class="product-back">
<h3>智能手表 Pro</h3>
<p class="product-description">
新一代智能手表，支持心率监测、血氧检测、运动追踪等功能。
1.4英寸AMOLED显示屏，30天超长续航，IP68防水等级。
</p>
<button class="product-button">立即购买</button>
</div>
</div>
</div>


<div class="product-card">
<div class="product-inner">
<div class="product-front">
<img src="https://via.placeholder.com/180x180/4a6baf/ffffff?text=无线耳机" alt="无线耳机" class="product-image">
<h2 class="product-title">降噪无线耳机</h2>
<div class="product-price">¥899</div>
</div>
<div class="product-back">
<h3>降噪无线耳机</h3>
<p class="product-description">
主动降噪技术，Hi-Fi音质体验。
蓝牙5.2，30小时续航，支持无线充电。
人体工学设计，佩戴舒适稳固。
</p>
<button class="product-button">立即购买</button>
</div>
</div>
</div>


<div class="product-card">
<div class="product-inner">
<div class="product-front">
<img src="https://via.placeholder.com/180x180/4a6baf/ffffff?text=智能手机" alt="智能手机" class="product-image">
<h2 class="product-title">旗舰智能手机</h2>
<div class="product-price">¥4999</div>
</div>
<div class="product-back">
<h3>旗舰智能手机</h3>
<p class="product-description">
6.7英寸AMOLED屏幕，120Hz刷新率。
旗舰级处理器，1亿像素主摄。
5000mAh大电池，65W快充。
</p>
<button class="product-button">立即购买</button>
</div>
</div>
</div>


<div class="product-card">
<div class="product-inner">
<div class="product-front">
<img src="https://via.placeholder.com/180x180/4a6baf/ffffff?text=平板电脑" alt="平板电脑" class="product-image">
<h2 class="product-title">高性能平板</h2>
<div class="product-price">¥2499</div>
</div>
<div class="product-back">
<h3>高性能平板</h3>
<p class="product-description">
10.5英寸2K全面屏，支持手写笔。
8核处理器，8GB内存+128GB存储。
四扬声器，杜比全景声。
</p>
<button class="product-button">立即购买</button>
</div>
</div>
</div>


<div class="product-card">
<div class="product-inner">
<div class="product-front">
<img src="https://via.placeholder.com/180x180/4a6baf/ffffff?text=智能音箱" alt="智能音箱" class="product-image">
<h2 class="product-title">AI智能音箱</h2>
<div class="product-price">¥599</div>
</div>
<div class="product-back">
<h3>AI智能音箱</h3>
<p class="product-description">
智能语音助手，支持多设备联动。
360°环绕音效，Hi-Fi级音质。
支持蓝牙/WiFi连接，家居控制中心。
</p>
<button class="product-button">立即购买</button>
</div>
</div>
</div>


<div class="product-card">
<div class="product-inner">
<div class="product-front">
<img src="https://via.placeholder.com/180x180/4a6baf/ffffff?text=电子阅读器" alt="电子阅读器" class="product-image">
<h2 class="product-title">电子阅读器</h2>
<div class="product-price">¥1099</div>
</div>
<div class="product-back">
<h3>电子阅读器</h3>
<p class="product-description">
7.8英寸E Ink Carta屏幕，300ppi。
32GB存储，支持多种电子书格式。
防水设计，冷暖双色温前光。
</p>
<button class="product-button">立即购买</button>
</div>
</div>
</div>
</div>

<div class="footer">

</div>
</body>
</html>