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

这篇具有很好参考价值的文章主要介绍了前端3D卡片轮播动画旋转小案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        这个前端3D卡片轮播动画旋转小案例是一个基于CSS3JavaScript实现的交互效果,可以让用户在网页上浏览一组卡片,并通过鼠标或手指滑动来切换卡片。每个卡片都有一个独特的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);
    }
}

觉得好用就给个小小的赞叭,不好用也给一个!文章来源地址https://www.toymoban.com/news/detail-665974.html

到了这里,关于前端3D卡片轮播动画旋转小案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包