<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flex布局实现骰子</title>
<style>
*{
padding:0;
margin:0;
}
body{
background: black;
}
.container{
position: relative;
width: 100px;
height: 100px;
top:200px;
left: 400px;
}
.contain{
perspective:1000;
transform-style:preserve-3d;
position: relative;
width: 100px;
height: 100px;
animation:scroll 5s linear 1s infinite;
}
@keyframes scroll{
100%{
transform:rotate3d(1,1,1,360deg);
}
}
.view{
position: absolute;
height: 100px;
width: 100px;
background: #ccc;
opacity: 0.8;
}
.view1{
z-index: 6;
display: flex;
display: -webkit-flex;
justify-content:center; /*弹性项在弹性容器的主轴线对齐方式*/
align-items:center; /*弹性项在弹性容器的侧轴方向上对齐方式*/
transform:translateZ(100px);
}
.view2{
z-index: 5;
display: flex;
flex-direction:column;
justify-content:space-around;
align-items:center;
transform:rotateY(-90deg); /*逆时针方向为负*/
transform-origin:left;
}
.view3{
z-index: 3;
transform-origin:top;
display: flex;
justify-content:space-around;
transform:rotateX(90deg);
transform-origin:top;
}
.view3 .point:nth-child(2){
align-self:center;
}
.view3 .point:nth-child(3){
align-self:flex-end;
}
.view4{
z-index: 2;
transform-origin:bottom;
display: flex;
justify-content:space-around;
flex-wrap:wrap;
transform:rotateX(-90deg);
transform-origin:bottom;
}
.view4 .column{
display: flex;
flex-basis:100%; /*弹性盒子子元素初始长度*/
justify-content:space-around;
align-items:center;
/* align-content:space-between; align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐,而是设置各个行的对齐。*/
}
.view5{
z-index: 4;
display: flex;
justify-content:space-around;
flex-wrap:wrap;
transform:rotateY(90deg);
transform-origin:right;
}
.view5 .column{
display: flex;
flex-basis:100%; /*弹性盒子子元素初始长度*/
justify-content:space-around;
align-items:center;
}
.view6{
display: flex;
justify-content:space-around;
flex-wrap:wrap;
z-index: 1;
}
.view6 .column{
display: flex;
flex-basis:100%; /*弹性盒子子元素初始长度*/
justify-content:space-around;
align-items:center;
}
.point{
width: 26px;
height: 26px;
border-radius: 13px;
background: black;
}
</style>
</head>
<body>
<div class="container">
<div class="contain">
<!--view为弹性盒子flex容器,point为弹性盒子子元素的一个项目-->
<!--单项目-->
<div class="view view1">
<div class="point"></div>
</div>
<!--双项目-->
<div class="view view2">
<div class="point"></div>
<div class="point"></div>
</div>
<!--三项目-->
<div class="view view3">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
</div>
<!--四项目-->
<div class="view view4">
<div class="column">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="column">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<!--五项目-->
<div class="view view5">
<div class="column">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="column">
<div class="point"></div>
</div>
<div class="column">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
<!--六项目-->
<div class="view view6">
<div class="column">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="column">
<div class="point"></div>
<div class="point"></div>
</div>
<div class="column">
<div class="point"></div>
<div class="point"></div>
</div>
</div>
</div>
</div>
</body>
</html>
弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转
最新推荐文章于 2023-02-24 20:21:16 发布