画个 3d 球...
原创前端 chaimens 随笔 js 和 CSS 实现的简单小功能 1.8k 阅读 2017-01-12 15:06:22 举报
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <link>
- <meta name="page-view-size" content="640*530">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- </head>
- <style>
- * {
- margin:0; padding:0;
- box-sizing: border-box;
- }
- body {
- background:black;
- }
- .wrap {
- margin: 150px auto;
- position: relative;
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- box-sizing: border-box;
- }
- .wrap, .ball, .yCenter, .zCenter ,.xCenter{
- width: 200px;
- height: 200px;
- border-radius: 50%;
- }
- .x1, .x2, .y1, .y2, .z1, .z2,.yCenter, .zCenter ,.xCenter {
- position: absolute;
- }
- .x1,.x2,.y1,.y2,.z1,.z2 {
- width: 87.5%;
- height: 87.5%;
- border-radius: 50%;
- }
- .ball {
- position: relative;
- transform-style: preserve-3d;
- animation: move 10s linear infinite;
- }
- .ball .x{
- top:0;
- left:0;
- border: 2px solid #FF0099;
- transform:translateY(100px);
- }
- .ball .y{
- top:0;
- left:0;
- border: 2px solid #a440fb;
- transform:rotateY(90deg) translateY(100px);
- }
- .ball .z{
- top:0;
- left:0;
- border: 2px solid #ffff4f;
- transform:rotateZ(90deg) translateX(100px);
- }
- .ball .x1{
- top:6%;
- left:6%;
- border: 1px solid #FF0099;
- transform:rotateX(90deg) translateZ(50px);
- }
- .ball .x2{
- top:6%;
- left:6%;
- border: 1px solid #FF0099;
- transform:rotateX(270deg) translateZ(50px);
- }
- .ball .y1{
- top:6%;
- left:6%;
- border: 1px solid #a440fb;
- transform:rotateY(90deg) translateZ(50px);
- }
- .ball .y2{
- top:6%;
- left:6%;
- border: 1px solid #a440fb;
- transform:rotateY(270deg) translateZ(50px);
- }
- .ball .z1{
- top:6%;
- left:6%;
- border: 1px solid #ffff4f;
- transform:rotateZ(90deg) translateZ(50px);
- }
- .ball .z2{
- top:6%;
- left:6%;
- border: 1px solid #ffff4f;
- transform:rotateZ(270deg) translateZ(-50px);
- }
- .ball .xCenter{
- width:100%;
- left:0%;
- border: 2px solid #FF0099;
- transform:rotateX(90deg);
- }
- .ball .yCenter{
- top:0;
- left:0;
- border: 2px solid #a440fb;
- transform:rotateY(90deg) ;
- }
- .ball .zCenter{
- width:100%;
- left:0;
- border: 2px solid #ffff4f;
- transform:rotateZ(90deg) ;
- }
- @keyframes move
- {
- 100% { transform: rotateX(360deg) rotateY(360deg) }
- }
- </style>
- <body leftmargin="0" topmargin="0">
- <div class="wrap">
- <div class="ball">
- <div class="x1"></div>
- <div class="x2"></div>
- <div class="xCenter"></div>
- <div class="x"></div>
- <div class="y1"></div>
- <div class="yCenter"></div>
- <div class="y2"></div>
- <div class="y"></div>
- <div class="z1"></div>
- <div class="zCenter"></div>
- <div class="z2"></div>
- <div class="z"></div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/34037/adf168ac9910a134d36db1c786aac0e3.html