水平3d柱状图

作者：从前慢现在也慢 | 2024-02-16 21:19:45

踩

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-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/96765