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

<!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空间旋转相关推荐

css 弹性盒子 flex布局
目录 css弹性盒子flex 布局什么是flex 常见父项属性概念与案例主轴与侧轴 flex-direction设置主轴的方向 justify-content 设置主轴上的子元素排列方式 fle ...
简述弹性盒子flex布局及rem布局
简述弹性盒子flex布局及rem布局 flex布局方式采用flex布局的元素,成为flex为容器,所有的子元素,都包含在容器内,容器存在两个默认的轴水平主轴主轴的开始位置(与边框的交叉点)叫做m ...
弹性盒子flex布局
今天打开我的csdn,竟然涨了7个粉丝,哈哈.为了我新涨的粉丝们,决定今晚加更一篇文章~ 目录一.flex弹性布局与传统布局的区别: 二.flex布局介绍三.父元素常见属性四.子元素常见属性五 ...
【HTML/CSS】弹性盒子 flex布局制作一个动画卡片
可以自己去找动画人物纯色背景,这样抠图比较容易. 字体是我随便找的下面是代码(看不懂没事): <!DOCTYPE html> <html lang="en"&g ...
简述弹性盒子 flex 布局及 rem 布局
rem简介: rem 是 CSS3 新增的一个相对单位,相对于根节点(html)字体大小的值,r 就是 root html{font-size:10px} 则 2rem=20px 通过它就可以做到只修 ...
html弹性盒子布局,div+css3弹性盒子(flex box)布局
一.CSS3 弹性盒子(Flex Box) 弹性盒子是CSS3的一种新布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确 ...
CSS3 弹性盒子(Flex Box)
目录 CSS3 弹性盒子(Flex Box) 一.什么是 Flexbox >>> 了解两个基本概念,接下来会频繁提到: >>> 了解两个基本方向,这个牵扯到弹性布局 ...
弹性盒子 Flex 子元素高度塌陷
弹性盒子 Flex 子元素高度塌陷数据来源:https://blog.csdn.net/sinat_36539161/article/details/81663971 先看看页面整体布局: · wr ...
认识弹性盒子flex
认识弹性盒子flex 来源:https://blog.xybin.top/2022/flex 1.定义弹性布局(父级上定义)display:flex; 如果说内核为webkit 的必须前面加上 -we ...

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

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

最新文章

热门文章