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

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>

相关推荐
Jimmy7 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz7 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
软件开发技术深度爱好者8 小时前
HTML版英语学习系统
学习·html
_李小白10 小时前
【OSG学习笔记】Day 18: 碰撞检测与物理交互
笔记·学习·游戏·3d
Dream耀21 小时前
掌握Flex布局核心:项目属性深度指南
前端·css·html
LuckySusu21 小时前
【HTML 篇】深入理解 Web Worker:让 JavaScript 在后台默默工作
前端·html
0x7CF1 天前
QT3D学习笔记——圆台、圆锥
qt·学习·3d
kooboo china.1 天前
Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(八):异步处理逻辑详解
前端·css·人工智能·编辑器·html·交互
Allen Bright1 天前
【HTML-16】深入理解HTML中的块元素与行内元素
前端·html
菜鸟小九1 天前
html、css(javaweb第一天)
前端·css·html