海阔天空

手机扫码查看

web前端CSS3特效

翻转的骰子
效果体验http://swq2014.github.io/tech/object1.html

<style>
*{margin: 0;padding: 0}
.box{width: 100px;margin: 100px auto;}
.box ul{width: 100px;height: 100px;margin:100px;position: relative;animation: move 6s infinite linear;
transform-style: preserve-3d;backface-visibility: hidden;}
.boxs{width: 100px;height: 100px;display: grid;border: 1px solid;border-radius: 8px;position: absolute;
grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);place-items:center center;
grid-template-areas:
“a1 a2 a3”
“a4 a5 a6”
“a7 a8 a9″;
}
@keyframes move{
0%{transform: rotateY(0deg);}
20%{transform: rotateX(360deg);}
30%{transform: rotateX(0deg);}
50%{transform: rotateY(-360deg);}
70%{transform: rotateY(0deg);}
90%{transform: rotateX(380deg);}
100%{transform: rotateY(0deg);}
}
.box .boxs:nth-child(1){background-color:red; top: 0px;left: 0px;}
.box .boxs:nth-child(2){background-color:yellow; top: 0px;left: 100px;transform:rotateY(90deg);transform-origin: left;}
.box .boxs:nth-child(3){background-color: green; top: 0px;right: 100px;transform:rotateY(-90deg);transform-origin: right;}
.box .boxs:nth-child(4){background-color: blue;top: -100px;left: 0;transform: rotateX(90deg);transform-origin: bottom;}
.box .boxs:nth-child(5){background-color: orange;top: 100px;left: 0;transform: rotateX(-90deg);transform-origin: top;}
.box .boxs:nth-child(6){background-color: #0ee; top: 0px;left: 0px;transform: translateZ(-100px) rotateY(180deg);}
.boxs div{width: 20px;height: 20px;border-radius: 50%;background-color: black;}
.box1 div{grid-area: a5!important}
.boxs div:last-child{grid-area: a9}

.box3 div:nth-child(2){grid-area:a5}

.box4 div:nth-child(2){grid-area:a3}
.box4 div:nth-child(3){grid-area:a7}

.box5 div:nth-child(2){grid-area:a3}
.box5 div:nth-child(3){grid-area:a5}
.box5 div:nth-child(4){grid-area:a7}

.box6 div:nth-child(2){grid-area:a4}
.box6 div:nth-child(3){grid-area:a7}
.box6 div:nth-child(4){grid-area:a3}
.box6 div:nth-child(5){grid-area:a6}
</style>

<div class=”box”>
<ul>
<div class=”box1 boxs”>
<div></div>
</div>
<div class=”box2 boxs”>
<div></div>
<div></div>
</div>
<div class=”box3 boxs”>
<div></div>
<div></div>
<div></div>
</div>
<div class=”box4 boxs”>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class=”box5 boxs”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class=”box6 boxs”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</ul>
</div>