为什么画面上只有一个圆环

qq_8y59zvxi CSS3 实现立体线框球形旋转... 最后由 qq_8y59zvxi 于2016年08月29日回复

  • 3 回答
  • 1.1k 浏览

<style type="text/css">

body

{

background-color: #000;

}

.ball-box{

width: 300px;

height: 300px;

position: absolute;

left: 50%;

top: 50%;

margin:-150px 0 0 -150px;

perspective-origin: 50% 50%;

perspective: 3000px;

}

@-webkit-keyframes rotate3d{

0%{transform:rotateZ(-30deg) rotateY(0);}

100%{transform:rotateZ(-30deg) rotateY(360deg);}

}

.ball{

height:100%;

-webkit-transform-style :preserve-3d /*flat*/;

transform:rotateX(-30deg) rotateZ(-30deg);

-webkit-animation:rotate3d 30s infinite linear;

}

.ball > div{

border: 1px #fff solid;

position: absolute;

width: 100%;

height: 100%;

border-radius: 100%;

}

.ball.line-1{ transform:rotateY(0);}

.ball.line-2{ transform:rotateY(36 deg);}

.ball.line-3{ transform:rotateY(72deg);}

.ball.line-4{ transform:rotateY(108deg);}

.ball.line-5{ transform:rotateY(144deg);}

</style>

</head>

<body>

<div class="ball-box">

<div class="ball">

<div class="line-1"></div>

<div class="line-2"></div>

<div class="line-3"></div>

<div class="line-4"></div>

<div class="line-5"></div>

</div>

</div>

</body>