CSS实现3D轮播卡片旋转变形-纵深效果-可视化大屏

已于 2024-03-22 15:52:23 修改
阅读量176 收藏 1
点赞数 3
文章标签： css 前端 3d
于 2024-03-14 14:15:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67862954/article/details/136708548
版权
文章描述了一个网页设计中使用ECharts库创建动态仪表盘以及集成3D地球效果的案例，展示了如何通过JavaScript实现数据可视化和3D旋转动画。
摘要由CSDN通过智能技术生成
// ---html
<!-- 左右两侧 -->

<div class="sideListBox sideLeftParBox">

        <div class="sideLeftBox">

                <div class="sideItemBox">

                        <div class="titleText">xxx<span>(元)</span></div>

                        <div class="valText">75</div>

                        <div class="botLine"></div>

                        <div class="guageChartBox" id="guageChart1"></div>

                        <div class="yusuanValText">xxx<span>18</span>%</div>

                </div>

                <div class="sideItemBox">

                        <div class="titleText">xxx<span>(%)</span></div>

                        <div class="valText">52.5</div>

                        <div class="botLine"></div>

                        <div class="guageChartBox" id="guageChart2"></div>

                        <div class="yusuanValText">xxx<span>52.2</span>%</div>

                </div>

                <div class="sideItemBox">

                        <div class="titleText">xxx<span>(%)</span></div>

                        <div class="valText">6.5</div>

                        <div class="botLine"></div>

                        <div class="guageChartBox" id="guageChart3"></div>

                        <div class="yusuanValText">xxx<span>6.2</span>%</div>

                </div>

        </div>

</div>

<div class="sideListBox sideRightParBox">

        <div class="sideRightBox">

                <div class="sideItemBox">

                        <div class="titleText">xxx<span>(元)</span></div>

                        <div class="valText">90</div>

                        <div class="botLine"></div>

                        <div class="guageChartBox" id="guageChart4"></div>

                        <div class="yusuanValText">xxx<span>90</span>元</div>

                </div>

                <div class="sideItemBox">

                        <div class="titleText">xxx<span>(%)</span></div>

                        <div class="valText">1.9</div>

                        <div class="botLine"></div>

                        <div class="guageChartBox" id="guageChart5"></div>

                        <div class="yusuanValText">xxx<span>1.8</span>%</div>

                </div>

                <div class="sideItemBox">

                        <div class="titleText">xxx<span>(%)</span></div>

                        <div class="valText">16.7</div>

                        <div class="botLine"></div>

                        <div class="guageChartBox" id="guageChart6"></div>

                        <div class="yusuanValText">xxx<span>13</span>%</div>

                </div>

        </div>

</div>

<!-- 中间卡片 -->

<div class="centerCardListBox">

        <div class="childCardBox">

                <div class="cardItemBox cardItemBox1"><img src="assets/image/index/center/cenCardBj1.png"></div>

                <div class="cardItemBox cardItemBox2""><img src="assets/image/index/center/cenCardBj2.png"></div>

                <div class="cardItemBox cardItemBox3")"><img src="assets/image/index/center/cenCardBj3.png"></div>

                <div class="cardItemBox cardItemBox4""><img src="assets/image/index/center/cenCardBj4.png"></div>

        </div>

</div>

<!-- 3D地球 -->

<div #mapId id="mapIdBox" class="mapBox"></div>

// ---less
//左右两侧

.sideListBox{

    text-align: center;

    .sideItemBox{

      height: 270px;

      box-sizing: border-box;

      margin-bottom: 12px;

      position: relative;

      overflow: hidden;

      .titleText{

        font-size: 28px;

        color: #fff;

        margin-top: 14px;

        span{

          font-size: 16px;

          margin-left: 8px;

        }

      }

      .valText{

        font-family: DigifaceWide;

        font-size: 40px;

        color: #FFFFFF;

        text-shadow: 1px 0 10px #0C3D69;

        margin: 5px 0 0;

        line-height: 52px;

      }

      .yusuanValText{

        font-size: 20px;

        color: #CADCFE;

        position: absolute;

        bottom: 16px;

        width: 100%;

        span{

          // font-family: DigifaceWide;

          margin-left: 5px;

          margin-right: 3px;

        }

      }

      .botLine{

        width: 80%;

        margin: 10px auto;

        border-bottom: 1px solid rgba(255,255,255,.1);

      }

      .slinesChartBox{

        width: 100%;

        height: 80px;

      }

      .guageChartBox{

        width: 100%;

        height: 280px;

        position: absolute;

        top: 120px;

      }

    }

  }

  .sideLeftParBox{

    top: 178px;

    left: 0;

    transform: translate3d(0px, 0px, 0px);

  }

  .sideLeftBox{

    width: 315px;

    height: 830px;

    background: url("/image/index/center/sideBjLeft.png") no-repeat;

    background-size: 100% 100%;

    transform: perspective(400px) rotate3d(-2, 20, 0, 8deg);

  }

  .sideRightParBox{

    top: 178px;

    right: 0;

    transform: translate3d(0px, 0px, 0px);

  }

  .sideRightBox{

    width: 315px;

    height: 830px;

    background: url("/image/index/center/sideBjRight.png") no-repeat;

    background-size: 100% 100%;

    transform: perspective(400px) rotate3d(-2, -20, 0, 8deg);

}

//中间卡片

.centerCardListBox{

    position: absolute;

    left: 355px;

    top: 240px;

    z-index: 1;

    width: 2045px;

    height: 420px;

    cursor: pointer;

    .childCardBox{

      position: relative;

      display: flex;

      height: 100%;

      transform: translate3d(0px, 0px, 0px);

      .cardItemBox{

        position: absolute;

        width: 320px;

        height: 419px;

        img{

          width: 100%;

          height: 100%;

        }

      }

      .cardItemBox1{

        transform: perspective(400px) rotate3d(-2, 20, 0, 8deg);

        left: 0;

      }

      .cardItemBox2{

        height: 380px;

        transform: perspective(800px) rotate3d(-2, 20, 0, 8deg);

        left: 340px;

        top: 20px;

      }

      .cardItemBox3{

        height: 380px;

        transform: perspective(800px) rotate3d(-2, -20, 0, 8deg);

        right: 340px;

        top: 20px;

      }

      .cardItemBox4{

        transform: perspective(400px) rotate3d(-2, -20, 0, 8deg);

        right: 0;

      }

    }

}

//3D地球

.mapBox{

    width: 680px;

    height: 680px;

    position: absolute;

    z-index: 1;

    left: 1038px;

    top: 325px;

    pointer-events: none;

}

// ---ts 
ngAfterViewInit(){

    this.initCardGuegeChart('guageChart1',18)

}

// 仪表盘

initCardGuegeChart(idName,val){

        let that = this;

        var chartDom = document.getElementById(idName);

        var myChart = echarts.init(chartDom);

        var option;

        var numbers = {"max_achievement":100,"this_achievement":Number(val)};



        option = {

                tooltip: {

                          show: false,

                },

                series: [{

                        min: 0,

                        max: numbers.max_achievement,

                        startAngle: 135,

                        endAngle: 45,

                        radius: '80%',

                        splitNumber: 4, //刻度数量

                        name: '指标',

                        type: 'gauge',

                        axisLabel: { //字体大小和颜色

                                distance: -12,

                                textStyle: {

                                        color: "#CADCFE",

                                        fontSize: "12",

                                }

                        },

                        axisLine: { // 坐标轴线  

                                lineStyle: { // 属性lineStyle控制线条样式  

                                        color: [

                                                [numbers.this_achievement / numbers.max_achievement, '#4FEAFC'],

                                                [1, '#CADCFE']

                                        ],

                                        width: 0

                                }

                        },

                        axisTick: { // 坐标轴小标记

                                length: 10, // 属性length控制线长

                                lineStyle: { // 属性lineStyle控制线条样式

                                        color: 'auto',

                                        width: 1

                                }

                        },

                        splitLine: { // 分隔线

                                length: -10, // 属性length控制线长

                                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式

                                       color: 'auto',

                                        width: 2

                                }

                        },

                        pointer: { //仪表盘指针

                                show: true,

                                length: '33%',

                                width: 2,            // 指针大小

                                offsetCenter: [0, -50] ,

                                itemStyle: {

                                        color: '#4FEAFC',

                                }

                        },

                        // markPoint: {// --- 仪表盘指针圆点

                                //     data: [

                                //       {

                                //         x: '50%',

                                //         y: '90',

                                //         symbol: 'circle',

                                //         symbolSize: 10,

                                //         itemStyle: { color: '#4FEAFC' }

                                //       },

                                //     ],

                        //   },

                        detail: {

                                show: false

                        },

                        data: [{

                                value: numbers.this_achievement,

                                name: '',

                                itemStyle: {

                                        color: '#4FEAFC',

                                        shadowColor: 'rgba(0, 0, 0, 0.5)',

                                        shadowBlur: 10

                                }

                        }]

                }]

        }



        myChart.clear();

        myChart.setOption(option);

        window.addEventListener("resize", function (ev) {

                myChart.resize();

        })

}

//（3D地球相关代码地址：threeJs实现3D地球-旋转-自定义贴图-透明发光-CSDN博客）

效果图

​

m0_67862954
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css:用css实现图片旋转轮播3d效果
weixin_43389331的博客
04-23 1619
CSS3的transform-style: :css3属性，在3d空间非常重要的一个属性，有两个值： flat 子元素将不保留其 3D 位置，默认值。 preserve-3d 子元素将保留其 3D 位置。 要注意的是ie不支持 transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。 效果显示效果图 思路：把六张图片放在一起，每张图片转换角度，角度自己调试，中间一张图片作为中...
jQuery+CSS3响应式图文卡片轮播切换特效
06-10
一款简单实用的jQuery+CSS3响应式图文卡片布局轮播切换特效，自适应电脑和手机端浏览。
一个刁刁的卡片样式广告轮播
前人挖坑，后人种（pen）
06-05 3824
转自：https://github.com/pinguo-zhouwei/MZBannerView MZBannerView 现在的APP Banner大多数千篇一律，前几天看到魅族手机上所有魅族自家APP上的Banner效果不错，于是就想着来仿着做一个类似的效果。因此就有了这个库。但是为了使用方便，这个库不仅仅只有仿魅族效果的BannerView 来使用，还可以当作普通的Ba
纯css轮播图
m0_64941684的博客
06-28 473
纯css轮播图，无js代码，功能包括自动轮播，鼠标放上轮播暂停，移开继续从当前轮播，可点击切换页面，且从切换后页面直接自动轮播。
【JavaWeb】CSS实现旋转木马轮播图
TechnicalXiaobai的博客
07-16 1384
轮播图、CSS、前端
jQuery+CSS3图文卡片轮播切换代码
06-24
jQuery+CSS3图文卡片轮播切换代码是一款基于owl-carousel图片滚动插件，通过bootstrap制作响应式卡片布局，组成炫酷的图文卡片轮播特效。
纯CSS实现旋转相册-3D旋转-悬停效果.html
04-18
这是一个使用纯CSS实现的旋转相册，通过CSS3的transform属性实现3D旋转和悬停效果。页面中包含一个div容器，其中包含多个img标签，每个img标签代表一个相册图片。通过设置容器的transform-style属性为preserve-3d，...
CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈
06-10
CSS3实现3D简单动画旋转正方体--海绵宝宝转圈圈 用到： margin: 100px auto; 绝对定位 position absolute; 动画animation animation: move 2s linear infinite; @keyframes move { from{ transform: rotateY(0...
HTML+CSS+JS数据可视化大屏平台模板实例10-大数据地图
03-25
在数据可视化中，CSS的作用尤为重要，因为它可以帮助我们实现视觉效果的一致性和吸引力。例如，我们可以用CSS来设置背景色、字体样式、边框、阴影、过渡效果等，使大屏看起来更加专业。此外，CSS还可以实现响应式...
前端，可视化大屏，纯css3+svg动画实现流转动画
06-21
在前端开发领域，数据可视化大屏是用于展示复杂数据或业务流程的重要手段。在这个项目中，我们看到开发者利用了纯CSS3和SVG技术来创建流转动画，为用户提供更直观、动态的数据展示效果。以下是关于这些知识点的详细...
手机端卡片效果轮播
06-03
移动端卡片效果上下轮播效果
CSS3图片3D旋转轮播特效.zip
07-11
<head> <meta charset="UTF-8"> <...meta name="viewport" content="width=device-width, initial-scale=1.0">... js css3实现的多个图片3D旋转轮播特效，很好看的网站焦点图立体旋转切换代码。
jq+css自制轮播效果
wangle_style的博客
02-27 230
html部分： 这是我定义的第一张图 这是我定义的第二张图 这是我定义的第三张图   css部分： .banner1 { width: 100%; height: 4rem; overflow: hidden; margin: 0 auto; position: relative; } .imgbox
前端3D卡片轮播动画旋转小案例
我们好像在哪见过
06-20 2636
5. 使用JavaScript的定时器和动画函数实现自动轮播效果，以及控制卡片的速度和方向。该案例的优点是可以提高用户的交互体验和视觉效果，增强网站的吸引力和品牌形象。每个卡片都有一个独特的3D旋转效果，可以让用户感受到卡片的立体感和动态效果。2. 使用JavaScript编写轮播逻辑，包括监听用户的滑动事件、计算卡片的位置和旋转角度、以及更新卡片的样式和位置。3. 使用CSS3的transform属性实现卡片的3D旋转效果，包括旋转角度、透视效果、阴影等。这是CSS代码，上面有详细的解析和注释。
CSS3 -- 3D轮播图
qq_51248309的博客
04-08 4282
css的3d轮播图
css 实现轮播图效果
蓝朽的小世界
04-06 6019
css实现轮播图效果
HTML+CSS：3D轮播卡片
最新发布
正在创作系列：【若冰说CSS】
01-22 3674
实现了一个3D翻转的卡片动画，其中每个卡片都有不同的图片和不同的旋转角度。整个动画循环播放，无限次。整个页面的背景是一个占据整个屏幕的背景图片，并且页面内容被隐藏在背景图片之下。
直播软件源码，CSS3实现图片立体旋转动画
云豹网络科技
05-25 143
直播软件源码，CSS3实现图片立体旋转动画 <style> body,html{ width: 100%; height: 100%; } body{ perspective: 1000px; } .rq { width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; /* border: 1px solid black;
数据大屏可视化，列表自动循环滚动动画实现
shsyzhzhgn的博客
08-21 943
数据大屏，列表自动滚动循环动画css3
css3 3d 轮播
10-23
CSS3 3D 轮播是一种通过 CSS3 技术实现的网页轮播效果，与传统的2D轮播相比，它可以在网页中创建出更加生动和具有立体感的轮播效果。 CSS3 3D 轮播原理是利用 CSS3 的 transform 属性，通过给定元素的旋转和平移等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值