您的位置：首页 > 其它

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

2016-08-03 11:22 585 查看 
<!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>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航