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

最新推荐文章于 2022-11-20 21:35:36 发布

原创最新推荐文章于 2022-11-20 21:35:36 发布 · 3.1k 阅读

10 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

13 篇文章

订阅专栏

这个示例展示了如何利用CSS3的Flex布局和3D转换来创建一个骰子，骰子的六个面使用Flexbox进行排列，并且整个骰子能进行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>