<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src='jquery-3.0.0.min.js'></script>
<style>
body{
perspective: 500px;
background-color: skyblue;
}
#demo {
200px;
height: 200px;
margin: 100px auto;
position: relative;
transform-style: preserve-3d;
transition: all 5s;
}
#demo .item{
100%;
height: 100%;
list-style: none;
position: absolute;
padding: 0;
margin: 0;
display: flex;
border-radius: 30px;
background-color: whitesmoke;
}
li{
30px;
height: 30px;
border-radius: 50%;
background-color: red;
margin: 5px;
}
.item:nth-child(1){
align-items: center;
justify-content: center;
transform: rotateY(0deg) translateZ(100px);
}
.item:nth-child(1) li{
50px;
height: 50px;
}
.item:nth-child(2){
justify-content: space-between;
transform: rotateY(180deg) translateZ(100px);
}
.item:nth-child(2) li{
40px;
height: 40px;
}
.item:nth-child(2) li:nth-child(2){
align-self: flex-end;
}
.item:nth-child(3){
justify-content: space-between;
transform: rotateY(90deg) translateZ(100px);
}
.item:nth-child(3) li{
35px;
height: 35px;
}
.item:nth-child(3) li:nth-child(3){
align-self: flex-end;
}
.item:nth-child(3) li:nth-child(2){
align-self: center;
justify-content: center;
}
.item:nth-child(4) {
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
transform: rotateY(-90deg) translateZ(100px);
}
.item:nth-child(4) li{
35px;
height: 35px;
margin: 20px;
}
.item:nth-child(5){
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
transform: rotateX(90deg) translateZ(100px);
}
.item:nth-child(5) li{
margin: 8px 15px;
}
.item:nth-child(5) li:nth-child(2){
margin-top: 85px;
}
.item:nth-child(6){
flex-wrap: wrap;
flex-direction: column;
justify-content: space-between;
align-content: space-between;
transform: rotateX(-90deg) translateZ(100px);
}
.item:nth-child(6) li{
margin: 18px 20px;
}
input{
display: block;
50px;
height: 40px;
margin: 0 auto;
}
</style>
<script>
$(function () {
$("#btn").click(function () {
var x = parseInt(Math.random()*3600);
var y = parseInt(Math.random()*3600);
$("#demo").css({ transform:'rotateX('+x+'deg) rotateY('+y+'deg)'})
})
})
</script>
</head>
<body>
<div id="demo">
<ul class="item">
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="item">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<input type="button" id="btn" value="开始"/>
</body>
</html>