3D 卡片悬停效果

卡片立起效果

鼠标悬停查看 3D 效果

实现代码:

html

<div class="card-container">
    <div class="card" style="width: var(--card-width); height: var(--card-height); perspective: 2500px;">
        <div class="card-wrapper" style="transform-style: preserve-3d;">
            <img alt="背景" class="cover-image" src="./images/3d/bg.jpeg">
            <div class="gradient-overlay"></div>
            <div class="gradient-bottom"></div>
        </div>
        <div class="card-back">
            <img alt="标题" class="title" src="./images/3d/title.png">
            <img alt="头像" class="character" src="./images/3d/wk.png">
        </div>
    </div>
</div>

css

.card-container {
    --card-width: 300px;
    --card-height: 400px;
    perspective: 2500px;
}

.card {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 2.25rem;
    margin: 0 3rem;
    transform-style: preserve-3d;
    transition: transform 0.5s;
    overflow: visible; /* 确保头像可以超出背景图 */
}

.card:hover {
    transform: rotateY(0deg) rotateX(35deg) rotateZ(0deg);
}

.card-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -10;
    transition: all 0.5s;
    border-radius: 0.5rem;
    transform-style: preserve-3d;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.card:hover .card-wrapper {
    transform: translateY(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    aspect-ratio: 3/4;
}

.gradient-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.5s;
    border-radius: 0.5rem;
    background: linear-gradient(to top, transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgb(12, 13, 19) 97%);
}

.card:hover .gradient-overlay {
    opacity: 1;
}

.gradient-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5rem;
    opacity: 1;
    transition: all 0.5s;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    background: linear-gradient(transparent 46%, rgba(12, 13, 19, 0.5) 68%, rgb(12, 13, 19) 97%);
}

.card:hover .gradient-bottom {
    height: 7.5rem;
}

.card-back {
    width: 100%;
    transition: transform 0.5s; /* 添加过渡效果 */
    position: relative;
}

.title {
    width: 100%;
    transition: transform 0.5s;
    position: relative;
    z-index: 10;
    margin-bottom: 2rem;
    transform: translateY(0);
}

.card:hover .title {
    transform: translateY(-20px);
}

.character {
    opacity: 0;
    transition: all 0.5s; /* 确保所有属性变化都有过渡效果 */
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -10;
}

.card:hover .card-back {
    transform: translateY(0) translateZ(20px) rotateX(-20deg) rotateY(0deg);
}

.card:hover .character {
    opacity: 1;
    transform: translateY(-40%) scale(1.2); /* 抬升头像，使其头部超出背景图的上边缘 */
}

卡片翻转效果

卡片翻转效果

卡片背面标题

这里是卡片的背面内容，可以包含更多详细信息。

实现代码:

html

<div class="card2-container">
    <div class="card2">
        <div class="card2-front">
            <h3>卡片翻转效果</h3>
            <p></p>
        </div>
        <div class="card2-back">
            <h3>卡片背面标题</h3>
            <p>这里是卡片的背面内容，可以包含更多详细信息。</p>
        </div>
    </div>
</div>

css

.card2-container {
    width: 300px;
    height: 200px;
    perspective: 1000px; /* 设置透视效果 */
}

.card2 {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d; /* 保持 3D 效果 */
    transition: transform 0.6s; /* 添加过渡效果 */
}

.card2-container:hover .card2 {
    transform: rotateY(180deg); /* 鼠标悬停时卡片翻转 */
}

.card2-front, .card2-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 隐藏背面 */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.card2-front {
    background-color:rgb(157, 210, 234);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.card2-back {
    background-color: #333;
    color: #fff;
    transform: rotateY(180deg); /* 背面初始状态为翻转 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}