vue实现卡片翻转轮播展示 vue实现卡片翻转轮播展示

vue卡片翻转轮播展示，同时在翻转时切换数据，供大家参考，具体内容如下
【vue实现卡片翻转轮播展示】效果及代码

文章图片

代码：

.list-container {width: 100%; height: 280px; }.reason {width: 696px; margin: 16px auto; height: 228px; position: relative; list-style: none; .logo {width: 150px; height: 150px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background: url('~@/assets/img/fullView/centerGround.dynamic.png'); background-size: 100% 100%; }.echart {width: 158px; height: 158px; position: absolute; left: -4px; top: 4px; }}.center-svg {width: 90px; height: 100px; position: absolute; left: 30px; top: 25px; z-index: 15; }

卡片组件

.goBack {transform-style: preserve-3d; animation: back 0.5s linear 1; }.back:hover {animation-play-state: paused; }@keyframes back {0% {transform: rotateZ(0deg) rotateY(0deg) rotateX(-90deg); }100% {transform: rotateZ(0deg) rotateY(0deg) rotateX(0deg); }}.span-container {width: 150px; margin: 0 0 5px 5px; color: var(--text-blue); font-size: var(--font-traffic-size); }.svg {width: 41px; height: 41px; }.top {display: flex; flex-wrap: nowrap; padding: 0 20px; margin: 0 0 14px 0; justify-content: space-between; align-items: center; height: 68px; border-radius: 10px; opacity: 0.9; background: linear-gradient(89deg,rgba(0, 76, 169, 0.5) 0%,rgba(0, 76, 169, 0) 46%,rgba(0, 76, 169, 0) 49%,rgba(0, 76, 169, 0) 52%,rgba(0, 76, 169, 0.5) 100%); }.top > div {width: 640px; display: flex; text-align: center; align-items: center; flex-wrap: nowrap; justify-content: space-between; & > div {width: 160px; span {margin-left: 15px; }}.index {width: 155px; height: 28px; font-size: var(--font-size-chart-title); text-align: center; margin: 0; line-height: 28px; }}

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。