一、Flex布局实现3D骰子
- 准备工作
首先,在HTML页面中添加一个div作为3D骰子的外层容器。在该容器中,使用6个div分别作为6个面。
<div class="dice">
<div class="front"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back"></div>
</div>
- Flexbox的属性
将外层容器设置为Flex布局,并通过flex-wrap属性设置为nowrap,使子元素不会换行,同时设置justify-content和align-items属性来控制子元素的对齐方式。
.dice {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
perspective: 800px;
}
- 面的布局
每个面的布局使用了绝对定位,这样每个面就可以重叠在一起了。然后,给每个面添加背景、border等样式,实现立体的3D效果。
.front {
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
border: solid 2px #000;
transform: translateZ(100px);
}
.top {
position: absolute;
width: 200px;
height: 200px;
background-color: #f00;
border: solid 2px #000;
transform: rotateX(-90deg) translateZ(100px);
}
.right {
position: absolute;
width: 200px;
height: 200px;
background-color: #0f0;
border: solid 2px #000;
transform: rotateY(90deg) translateZ(100px);
}
.bottom {
position: absolute;
width: 200px;
height: 200px;
background-color: #00f;
border: solid 2px #000;
transform: rotateX(90deg) translateZ(100px);
}
.left {
position: absolute;
width: 200px;
height: 200px;
background-color: #ff0;
border: solid 2px #000;
transform: rotateY(-90deg) translateZ(100px);
}
.back {
position: absolute;
width: 200px;
height: 200px;
background-color: #f0f;
border: solid 2px #000;
transform: rotateY(180deg) translateZ(100px);
}
这里,使用translateZ和rotate属性控制面在三维空间中的位置和方向。
- 完整代码
<div class="dice">
<div class="front"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back"></div>
</div>
.dice {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
perspective: 800px;
}
.front {
position: absolute;
width: 200px;
height: 200px;
background-color: #fff;
border: solid 2px #000;
transform: translateZ(100px);
}
.top {
position: absolute;
width: 200px;
height: 200px;
background-color: #f00;
border: solid 2px #000;
transform: rotateX(-90deg) translateZ(100px);
}
.right {
position: absolute;
width: 200px;
height: 200px;
background-color: #0f0;
border: solid 2px #000;
transform: rotateY(90deg) translateZ(100px);
}
.bottom {
position: absolute;
width: 200px;
height: 200px;
background-color: #00f;
border: solid 2px #000;
transform: rotateX(90deg) translateZ(100px);
}
.left {
position: absolute;
width: 200px;
height: 200px;
background-color: #ff0;
border: solid 2px #000;
transform: rotateY(-90deg) translateZ(100px);
}
.back {
position: absolute;
width: 200px;
height: 200px;
background-color: #f0f;
border: solid 2px #000;
transform: rotateY(180deg) translateZ(100px);
}
二、Grid布局实现3D骰子
- 准备工作
与Flex布局相同,先在HTML页面中添加一个div作为外层容器,然后在该容器中添加6个div作为6个面。
<div class="dice">
<div class="front"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back"></div>
</div>
- Grid布局的属性
将外层容器设置为Grid布局,并设置6个子元素的大小和位置。
.dice {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
grid-gap: 2px;
width: 306px;
height: 206px;
perspective: 800px;
}
- 面的布局
在每个子元素中添加背景色、边框以及旋转等样式,使得六个面可以拼合成一个骰子。
.front {
background-color: #fff;
border: solid 2px #000;
transform: transformZ(100px);
grid-area: 2/2/3/3;
}
.top {
background-color: #f00;
border: solid 2px #000;
transform: transformX(-100px) rotateZ(90deg) transformOrigin(bottom bottom);
grid-area: 1/2/2/3;
}
.right {
background-color: #0f0;
border: solid 2px #000;
transform: transformY(100px) rotateZ(-90deg) transformOrigin(left right);
grid-area: 2/3/3/4;
}
.bottom {
background-color: #00f;
border: solid 2px #000;
transform: transformX(100px) rotateZ(90deg) transformOrigin(top top);
grid-area: 3/2/4/3;
}
.left {
background-color: #ff0;
border: solid 2px #000;
transform: transformY(-100px) rotateZ(90deg) transformOrigin(right left);
grid-area: 2/1/3/2;
}
.back {
background-color: #f0f;
border: solid 2px #000;
transform: rotateX(180deg) transformZ(-100px);
grid-area: 2/2/3/3;
}
这里,使用transform和transform-origin属性来实现3D效果。同时,通过grid-area属性来确定子元素在Grid中的位置和大小。
- 完整代码
<div class="dice">
<div class="front"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="back"></div>
</div>
.dice {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
grid-gap: 2px;
width: 306px;
height: 206px;
perspective: 800px;
}
.front {
background-color: #fff;
border: solid 2px #000;
transform: transformZ(100px);
grid-area: 2/2/3/3;
}
.top {
background-color: #f00;
border: solid 2px #000;
transform: transformX(-100px) rotateZ(90deg) transformOrigin(bottom bottom);
grid-area: 1/2/2/3;
}
.right {
background-color: #0f0;
border: solid 2px #000;
transform: transformY(100px) rotateZ(-90deg) transformOrigin(left right);
grid-area: 2/3/3/4;
}
.bottom {
background-color: #00f;
border: solid 2px #000;
transform: transformX(100px) rotateZ(90deg) transformOrigin(top top);
grid-area: 3/2/4/3;
}
.left {
background-color: #ff0;
border: solid 2px #000;
transform: transformY(-100px) rotateZ(90deg) transformOrigin(right left);
grid-area: 2/1/3/2;
}
.back {
background-color: #f0f;
border: solid 2px #000;
transform: rotateX(180deg) transformZ(-100px);
grid-area: 2/2/3/3;
}
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS使用Flex和Grid布局实现3D骰子 - Python技术站