本来是想搞一个立方体图片,结果刚好想到了骰子就在源代码上进行了一些调整
废话不多说,双手献上代码供各位点评,下面这段是通过cv大法搞来的(侵权必删)
1:3d立方体相册
css样式
.content {
width: 80px;
height: 80px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(-80deg);
position: relative;
margin: 80px auto;
animation: rotate linear 20s infinite;
text-align: center;
}
@-webkit-keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
.content > div {
width: 80px;
height: 80px;
position: absolute;
opacity: 0.8;
background-color: #eec;
color: orangered;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.content > div > img {
width: 80px;
height: 80px;
}
.content .top {
transform: rotateX(90deg) translateZ(40px);
}
.content .left {
transform: rotateY(-90deg) translateZ(40px);
}
.content .bottom {
transform: rotateX(-90deg) translateZ(40px);
}
.content .right {
transform: rotateY(90deg) translateZ(40px);
}
.content .front {
transform: rotateY(0deg) translateZ(40px);
}
.content .after {
transform: translateZ(-40px) rotateY(180deg);
}
下面是html部分(可用在vue组件内,亲试有效) ,不用做任何修改
<div class="content">
<div class="top">
<img :src="slider1" />
</div>
<div class="bottom">
<img :src="slider2" />
</div>
<div class="left">
<img :src="slider3" />
</div>
<div class="right">
<img :src="slider4" />
</div>
<div class="front">
<img :src="slider2" />
</div>
<div class="after">
<img :src="slider4" />
</div>
</div>
2:源代码基础进行修改实现骰子效果(有点丑,请轻喷)
html部分
<div class="content">
<div class="top">
<ul class="one">
<li></li>
</ul>
</div>
<div class="bottom">
<ul class="six">
<li></li>
<li></li>
<li></li>
<li></li>
<li style="margin-bottom: 5px;"></li>
<li style="margin-bottom: 5px;"></li>
</ul>
</div>
<div class="left">
<ul class="three">
<li style="align-self: flex-start;"></li>
<li style=" margin: 0;"></li>
<li style="align-self: flex-end;"></li>
</ul>
</div>
<div class="right">
<ul class="four">
<li></li>
<li></li>
<li style="margin-top: 0; margin-bottom: 5px;"></li>
<li style="margin-top: 0; margin-bottom: 5px;"></li>
</ul>
</div>
<div class="front">
<ul class="five" style="position: relative;">
<li style="position: absolute; margin: 0; left: 30px; top: 30px;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="after">
<ul class="two">
<li></li>
<li></li>
</ul>
</div>
</div>
css样式(在原样式基础增加)
.content ul {
padding: 0;
list-style: none;
margin: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
// flex-flow: column;
flex-wrap: wrap;
justify-content: space-evenly;
}
content ul.two {
display: flex;
align-items: center;
flex-flow: column;
justify-content: space-evenly;
}
.content ul.three {
flex-wrap: nowrap;
}
.content ul.three li {
margin: 0;
}
.content ul.four li {
margin: 10px 10px 0;
}
.content ul.six li {
margin: 5px 10px 0;
}
.content li {
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
margin: 10px;
}
.one li,
.three li,
.four li {
background-color: red;
}
虽然这个丑了吧唧的骰子还有很大的优化空间,但是......我不搞了,马上过年了,准备进入新一轮学习,大家一起加油