前端3D卡片轮播动画旋转小案例

耀南.

已于 2023-07-22 16:28:13 修改

阅读量2.8k

点赞数 5

分类专栏：前端好玩炫酷的动画小案例文章标签：前端 3d javascript

于 2023-06-20 14:50:32 首次发布

本文链接：https://blog.csdn.net/YN2000609/article/details/131306741

版权

前端好玩炫酷的动画小案例专栏收录该内容

115 篇文章 11 订阅

订阅专栏

该示例通过CSS3和JavaScript创建了一个3D卡片轮播动画，用户可以滑动切换带有独特旋转效果的卡片，提升交互体验和视觉吸引力。主要涉及HTML结构、CSS样式（包括transform和transition属性）以及JavaScript轮播逻辑和动画控制。

摘要由CSDN通过智能技术生成

这个前端3D卡片轮播动画旋转小案例是一个基于CSS3和JavaScript实现的交互效果，可以让用户在网页上浏览一组卡片，并通过鼠标或手指滑动来切换卡片。每个卡片都有一个独特的3D旋转效果，可以让用户感受到卡片的立体感和动态效果。

该案例的实现思路如下：

1. 使用HTML和CSS创建卡片容器，并设置每个卡片的样式和位置。

2. 使用JavaScript编写轮播逻辑，包括监听用户的滑动事件、计算卡片的位置和旋转角度、以及更新卡片的样式和位置。

3. 使用CSS3的transform属性实现卡片的3D旋转效果，包括旋转角度、透视效果、阴影等。

4. 使用CSS3的transition属性实现卡片的平滑过渡效果，包括旋转、移动、缩放等。

5. 使用JavaScript的定时器和动画函数实现自动轮播效果，以及控制卡片的速度和方向。该案例的优点是可以提高用户的交互体验和视觉效果，增强网站的吸引力和品牌形象。同时，该案例也可以作为学习CSS3和JavaScript动画效果的一个好的实例。

这是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D轮播卡片</title>
    <link rel="stylesheet" href="./card.css">
    <link rel="shortcut icon" href="https://cn-assets.gitee.com/assets/favicon-9007bd527d8a7851c8330e783151df58.ico" type="image/x-icon">
</head>
<body>
    <!-- 大容器 -->
    <div class="container">
        <!-- 卡片的盒子 -->
        <div class="card-box">
            <!-- 卡片图 -->
            <div class="card">
                <img src="./car1.jpg" alt="">
            </div>
            <div class="card">
                <img src="./car4.jpg" alt="">
            </div>
            <div class="card">
                <img src="./car3.jpg" alt="">
            </div>
            <!-- <div class="card">
                <img src="./car3.jpg" alt="">
            </div> -->
        </div>
    </div>
</body>
</html>

这是CSS代码，上面有详细的解析和注释

*{
    /* 初始化 取消内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度（height：100vh === height：100% 占据整个窗口） */ 
    height: 100vh;   
    /* 弹性布局 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 同时将图的溢出部分隐藏掉，并设置背景颜色为黑色 */
    overflow: hidden;
    background-color: #000;
}
/* 定义容器宽度 */
/* 设置其宽度、高度和透视距离，以便在后面实现卡片的 3D 效果 */
.container{
    width: 300px;
    height: 450px;
    /* 这个属性用来增加卡片旋转的立体感 */
    perspective: 1000px;
    /* 相对定位  以便在后面绝对定位的子元素相对于该容器定位*/
    position: relative;
}
/* 定义卡片盒子的元素 */
.card-box{
    /* 绝对定位 */
    position: absolute;
    width: 100%;
    height: 100%;
    /* 给父元素加一个3D盒子属性 */
    transform-style: preserve-3d;
    /* 将其初始化位置设为 Z（垂直方向） 轴上的 -700px */
    transform:  rotateY(0) translateZ(-700px);
    /* 执行动画：设置动画名 时长 贝塞尔曲线 无限次播放 */
    animation: cardRotate 10s cubic-bezier(0.77,0,0.175,1) infinite;
}
/* 定义卡片元素 */
.card{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* 水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 设置元素的倒影效果，below是倒影在元素下方，15px是元素和倒影的距离，后面的属性是设置倒影渐变 */
    -webkit-box-reflect: below 15px -webkit-linear-gradient(transparent 50%,rgba(255,255,255,0.3));
    /* 透明度 */
    /* opacity: 0.8; */
}
/* 图片元素宽高100充满整个卡片 */
.card img{
    width: 100%;
    height: 100%;
}
/* 为每一个卡片设置初始化位置和旋转角度  使其在3d空间中呈现出一个立体的效果*/
/* nth-child(n)：选择列表中的第 n 个标签 */
.card:nth-child(1){
    transform: rotateY(0) translateZ(700px);
}
.card:nth-child(2){
    transform: rotateY(120deg) translateZ(700px);
}
.card:nth-child(3){
    transform: rotateY(240deg) translateZ(700px);
}
/* 定义动画  旋转*/
@keyframes cardRotate {
    /* 将卡片移动到z轴上的-700px，再设置旋转角度为0 */
    0%,20%{
        transform: translateZ(-700px) rotateY(0);
    }
    /* 旋转120度 以便呈现出3d立体效果 */
    45%{
        transform: translateZ(-700px) rotateY(-120deg);
    }
    75%{
        transform: translateZ(-700px) rotateY(-240deg);
    }
    /* 最后360° 回到初始位置 */
    100%{
        transform: translateZ(-700px) rotateY(-360deg);
    }
}

觉得好用就给个小小的赞叭，不好用也给一个！