4. 文字效果/2D-3D转换 - 3D翻转卡片

码农黛兮_462025-05-18 4:02
4. 文字效果/2D-3D转换 - 3D翻转卡片

案例：3D产品展示卡片
html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		.scene {
		    width: 300px;
		    height: 400px;
		    perspective: 1000px;
		    margin: 50px auto;
		  }
		  
		  .card {
		    width: 100%;
		    height: 100%;
		    position: relative;
		    transition: transform 1s;
		    transform-style: preserve-3d;
		  }
		  
		  .scene:hover .card {
		    transform: rotateY(180deg);
		  }
		  
		  .card-face {
		    position: absolute;
		    width: 100%;
		    height: 100%;
		    backface-visibility: hidden;
		    border-radius: 10px;
		    overflow: hidden;
		    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
		  }
		  
		  .card-front {
		    background: linear-gradient(45deg, #ff9a9e, #fad0c4);
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		  }
		  
		  .card-back {
		    background: linear-gradient(45deg, #a18cd1, #fbc2eb);
		    transform: rotateY(180deg);
		    padding: 20px;
		    box-sizing: border-box;
		  }
		  
		  .product-title {
		    font-size: 24px;
		    margin-bottom: 10px;
		    color: white;
		    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
		  }
		  
		  .product-image {
		    width: 80%;
		    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.2));
		  }
		  
		  .product-description {
		    color: white;
		    line-height: 1.6;
		  }
	</style>
	<body>
		<div class="scene">
		  <div class="card">
		    <div class="card-face card-front">
		      <h2 class="product-title">智能手表</h2>
		      <img src="smartwatch.png" class="product-image">
		    </div>
		    <div class="card-face card-back">
		      <h3>产品特性</h3>
		      <p class="product-description">
		        心率监测 | 运动追踪 | 50米防水<br>
		        14天续航 | 通知提醒 | 多种表盘
		      </p>
		      <div class="price">¥899</div>
		    </div>
		  </div>
		</div>
	</body>
</html>