grid布局实战

grid+transform实现页面3D骰子

回顾

transform

1
transform-style: preserve-3d;/*所有子元素在3D空间中呈现*/

偏移

1
transform: translateX(90px) translateY(90px) translateZ(90px);/*左右 下上 前后*/

旋转

1
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)

image-20241110201517099.png

实战效果

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
<div class="container">
    <div class="wrap" id="dice">
        <div class="face face-grid first-face">
            <span class="dot cc-dot red"></span>
        </div>
        <div class="face face-grid second-face">
            <span class="dot lt-dot"></span>
            <span class="dot rb-dot"></span>
        </div>
        <div class="face face-grid third-face">
            <span class="dot lt-dot"></span>
            <span class="dot cc-dot"></span>
            <span class="dot rb-dot"></span>
        </div>
        <div class="face face-grid forth-face">
            <span class="dot lt-dot"></span>
            <span class="dot lb-dot"></span>
            <span class="dot rt-dot"></span>
            <span class="dot rb-dot"></span>
        </div>
        <div class="face face-grid fifth-face">
            <span class="dot lt-dot"></span>
            <span class="dot lb-dot"></span>
            <span class="dot cc-dot"></span>
            <span class="dot rt-dot"></span>
            <span class="dot rb-dot"></span>
        </div>
        <div class="face face-grid sixth-face">
            <span class="dot lt-dot red"></span>
            <span class="dot lc-dot red"></span>
            <span class="dot lb-dot red"></span>
            <span class="dot rt-dot red"></span>
            <span class="dot rc-dot red"></span>
            <span class="dot rb-dot red"></span>
        </div>
    </div>
</div>
结构
1
2
3
4
container                       //外层占位容器
    wrap / dice                 //控制旋转
        face / face-grid * 6    //面
            dot / red           //点

CSS

box-sizing
1
2
3
div {
    box-sizing: border-box;/*元素的width和height包括content、padding和border的宽度，但不包括margin*/
}
渐变边框技术做面
1
2
3
4
5
6
7
8
9
10
11
12
13
.face {
    position: absolute;
    width: 120px;
    height: 120px;
    padding: 20px;/*w/h/p都包裹边框的宽度，是从边框的最里往里padding*/
    opacity: 0.95;
    border: 8px solid transparent; /*8px的透明边框，就是渐变边框的宽度*/
    background-clip: padding-box, border-box;/*必要的两项*/
    background-origin: padding-box, border-box;/*必要的两项*/
    background-image: 
        linear-gradient(135deg, #e1eeffbb, #f3d5ffbb),
        linear-gradient(135deg, rgb(0, 60, 255), rgb(0, 225, 255), #f0f);/*渐变角度+渐变颜色*/
}
grid做点（face-grid）
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
.face-grid {
    /*骰子点数布局*/
    display: grid;
    grid-template-rows: repeat(3, 1fr);/*行*/
    grid-template-columns: repeat(3, 1fr);/*列*/
    grid-template-areas:
        'lt . rt'
        'lc cc rc'
        'lb . rb';
}
.lt-dot {
    grid-area: lt;
}
.rt-dot {
    grid-area: rt;
}
.lc-dot {
    grid-area: lc;
}
.cc-dot {
    grid-area: cc;
}
.rc-dot {
    grid-area: rc;
}
.lb-dot {
    grid-area: lb;
}
.rb-dot {
    grid-area: rb;
}
点状样式（dot/red）
1
2
3
4
5
6
7
8
9
10
.dot {/*黑点*/
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #1759af;
}
.red {/*红点（继承黑点属性）*/
    background-color: rgb(162, 0, 211);
}
偏移+旋转面
1
2
3
4
5
6
1面（前） 前移 50%边长
6面（后） 后移 50%边长
2面（左） 左移 50%边长 + Y 90deg
3面（右） 右移 50%边长 + Y 90deg
5面（上） 上移 50%边长 + X 90deg
4面（下） 下移 50%边长 + X 90deg
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.first-face {
    transform: translateZ(60px);
}
.second-face {
    transform: translateX(-60px) rotateY(90deg);
}
.third-face {
    transform: translateX(50%) rotateY(90deg);
}
.forth-face {
    transform: translateY(50%) rotateX(90deg);
}
.fifth-face {
    transform: translateY(-50%) rotateX(90deg);
}
.sixth-face {
    transform: translateZ(-60px);
}
效果图

image-20241115172203521.png

加点动效（CSS_hover）
1
2
3
4
.wrap:hover {
    transform: rotateX(300deg) rotateY(0deg) rotateZ(100deg) !important;
    transition: transform 2s;
}

JS实现随机点数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
    let wrap = document.querySelector('.wrap')
    let rotateX = 0 // 初始化旋转角度
    let rotateY = 0
    let rotateZ = 0

    wrap.onclick = function () {
        let x = Math.floor(Math.random() * 10) - 5 //随机数，范围是-5到5
        let y = Math.floor(Math.random() * 10) - 5
        let z = Math.floor(Math.random() * 10) - 5
        rotateX += x * 90
        rotateY += y * 90
        rotateZ += z * 90
        wrap.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`
    }
</script>

暂时还不会计算旋转后的点数显示

等有思路了继续更新