弹性盒子flex布局实现骰子六个面并让骰子3D空间旋转

来源：互联网发布：培罗成西服淘宝店编辑：程序博客网时间：2024/06/09 22:15
<!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>
1 0