4. 文字效果/2D-3D转换 - 3D翻转卡片
.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;
}