水平3d柱状图

最新推荐文章于 2023-08-10 19:09:36 发布

山海一哥

最新推荐文章于 2023-08-10 19:09:36 发布

阅读量341

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_43702430/article/details/106639286

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近做了查了很多资料，做了一个3D渐变水平柱状图，给大家做个参考，以更好的理解学习css3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>水平3d柱状图</title>
</head>
<style>
    .cube-warper {
        margin-top: 100px;
        position: relative;
        width: 420px;
        height: 20px;
        transform-style: preserve-3d;
        transform: rotateY(-15deg);
    }
 
    .cube-box {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        transition: .5s all;
        transform-style: preserve-3d;
        transform: rotateX(45deg);
    }
    .cube {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5
    }
    .face1 {
        background-image: linear-gradient(to right, #72C9CC,#a85224 );
    }
    .face2 {
        transform-origin: left top;
        transform: rotateX(90deg);
        background-image: linear-gradient(to right, #72C9CC,#a85224);
    }
    .face3 {
        transform-origin: left bottom;
        transform: rotateX(-90deg);
        background-image: linear-gradient(to right, #72C9CC,#a85224);
    }
    .face4 { 
        transform: translateZ(20px);
        background-image: linear-gradient(to right, #72C9CC,#a85224);
    }
 
   .inner{
        width: 20%;
        height: 100%;
        background-color: rgba(160, 160, 160, .8);
        float: right;
   } 
</style>
 
<body>
    <div class="cube-warper">
        <div class="cube-box">
            <div class="cube face1">
                <div  class="inner"></div>
            </div>
            <div class="cube face2">
                <div  class="inner"></div>
            </div>
            <div class="cube face3">
                <div  class="inner"></div>
            </div>
            <div class="cube face4">
                <div  class="inner"></div>
            </div>
        </div>
    </div>
</body>
</html>

效果如下
在这里插入图片描述

山海一哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
水平3d柱状图

最近做了查了很多资料，做了一个3D渐变水平柱状图，给大家做个参考，以更好的理解学习css3<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib
复制链接

扫一扫