<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
background: #000;
}
.outer{
-webkit-perspective:800;
-webkit-perspective-origin: 50% 150px;
}
.inner{
position: relative;
top: 200px;
margin: auto;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: motion 10s linear infinite;
-o-animation: motion 10s linear infinite;
animation: motion 10s linear infinite;
/* -webkit-transform: rotateX(-30deg);
-ms-transform: rotateX(-30deg);
-o-transform: rotateX(-30deg);
transform: rotateX(-30deg);*/
}
.card{
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(255,255,255,.6);
color: #000;
border: 1px solid #fff;
border-radius: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 120px;
line-height: 200px;
text-align: center;
backface-visibility: visible;
}
@-webkit-keyframes motion {
from { }
to { -webkit-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
-o-transform: rotateY(-360deg);
transform: rotateY(-360deg); }
}
/* .ob{
-webkit-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
-ms-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
-o-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
transform: scale3d(0.8,0.8,0.8) translateZ(100px);
}*/
.box1{
-webkit-transform: scale3d(0.8,0.8,0.8) translateZ(375px);
/*-ms-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
-o-transform: scale3d(0.8,0.8,0.8) translateZ(100px);
transform: scale3d(0.8,0.8,0.8) translateZ(100px);*/
}
.box2{
-webkit-transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(375px);
/*-ms-transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-o-transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(100px);
transform: rotateY(30deg) scale3d(0.8,0.8,0.8) translateZ(100px);*/
}
.box3{
-webkit-transform: rotateY(60deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box4{
-webkit-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box5{
-webkit-transform: rotateY(120deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box6{
-webkit-transform: rotateY(150deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box7{
-webkit-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box8{
-webkit-transform: rotateY(210deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box9{
-webkit-transform: rotateY(240deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box10{
-webkit-transform: rotateY(270deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box11{
-webkit-transform: rotateY(300deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
.box12{
-webkit-transform: rotateY(330deg) scale3d(0.8,0.8,0.8) translateZ(375px);
}
/* .box3{
-webkit-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-ms-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-o-transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
transform: rotateY(90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
}
.box4{
-webkit-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-ms-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-o-transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);
transform: rotateY(180deg) scale3d(0.8,0.8,0.8) translateZ(100px);
}
.box5{
-webkit-transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-ms-transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-o-transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
transform: rotateY(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
}
.box6{
-webkit-transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-ms-transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
-o-transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
transform: rotateX(-90deg) scale3d(0.8,0.8,0.8) translateZ(100px);
}*/
</style>
</head>
<body>
<div class="outer">
<div class="inner">
<div class="card box1">1</div>
<div class="card box2">2</div>
<div class="card box3">3</div>
<div class="card box4">4</div>
<div class="card box5">5</div>
<div class="card box6">6</div>
<div class="card box7">7</div>
<div class="card box8">8</div>
<div class="card box9">9</div>
<div class="card box10">10</div>
<div class="card box11">11</div>
<div class="card box12">12</div>
</div>
</div>
</body>
</html>
联系客服
