<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
<style type="text/css">
body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,textarea,hr{
margin:0;
padding:0;
}
body{
display: flex;
background: -webkit-linear-gradient(top,#222,#333);
background: linear-gradient(top,#222,#333);
justify-content:center;
align-items:center;
align-content:center;
flex-wrap:wrap;
position:relative;
}
[class$="box"]{
background-color: #e7e7e7;
width: 104px;
height: 104px;
/*padding:4px;
margin:16px;*/
object-fit:contain;
border-radius: 10%;
box-shadow: inset 0 5px white,inset 0 -5px #bbb,inset 5px 0 #d7d7d7,inset -5px 0 #d7d7d7;
display: flex;
position: absolute;
top:0;
left: 0;
/*top: 40%;
left: 40%;*/
}
[class="item"]{
display: block;
width:24px;
height: 24px;
border-radius: 50%;
margin:4px;
background-color: #333;
box-shadow: inset 0 3px #111,inset 0 -3px #555;
}
.first-box{
justify-content:center;
align-items:center;
align-content:center;
}
.second-box{
justify-content:space-between;
}
.second-box .item:nth-of-type(2){
-webkit-align-self:flex-end;
}
.third-box{
}
.third-box .item:nth-of-type(2){
align-self:center;
}
.third-box .item:nth-of-type(3){
align-self:flex-end;
}
.sixth-box,
.four-box{
justify-content:space-between;
justify-wrap:wrap;
}
.sixth-box .column,
.four-box .column{
display: flex;
flex-direction:column;
justify-content:space-between;
}
.fifth-box{
justify-content:space-between;
}
.fifth-box .column{
display: flex;
flex-direction:column;
justify-content:space-between;
}
.fifth-box .column:nth-of-type(2){
justify-content:center;
align-items:center;
}
.tbox{
width: 104px;
height: 104px;
background-color: transparent;
border:none;
box-shadow: none;
transform-style:preserve-3d;
display: flex;
justify-content:center;
align-items:center;
align-content:center;
flex-wrap:wrap;
position:relative;
-webkit-animation:iphone 4s linear infinite;
transform:rotateZ(30deg);
}
.tbox:hover{
-webkit-animation-play-state:paused;
}
.sixth-box{
/*transform:rotate(30deg);*/
transform-origin:right bottom;
transform:rotateZ(30deg);
}
.fifth-box{
margin-left: 25px;
margin-top: 7px;
transform-origin:right 50%;
transform:translateZ(-105px) rotateY(90deg) rotateX(-29deg);
}
.four-box{
margin-left: 40px;
margin-top: -45px;
/*margin-top: -36px;*/
transform-origin:left 50%;
transform:translateZ(-105px) rotateY(-90deg) rotateX(30deg);
}
.third-box{
margin-left: 40px;
margin-top:-45px;
/*margin-left: 240px;*/
transform-origin:left 50%;
transform:translateZ(-105px) rotateZ(30deg);
}
.second-box{
margin-left: 7px;
margin-top:80px;
/*margin-top: 128px;*/
transform-origin: 50% top;
transform:translateZ(-105px) rotateX(90deg) rotateY(30deg);
}
.first-box{
margin-left:58px;
margin-top:-116px;
/*margin-top: -96px;*/
transform-origin: 50% bottom;
transform:translateZ(-105px) rotateX(-90deg) rotateY(-30deg);
}
@-webkit-keyframes iphone{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="tbox">
<div class="first-box">
<span class="item"></span>
</div>
<div class="second-box">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="third-box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="four-box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="fifth-box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
</div>
</div>
<div class="sixth-box">
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
<div class="column">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</div>
</div>
</body>
</html>
