这个前端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代码,上面有详细的解析和注释文章来源:https://www.toymoban.com/news/detail-665974.html
*{
/* 初始化 取消内外边距 */
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模板网!