html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <style>
- html{
- background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);
- width: 100%;
- height:100%;
- }
- .sence{
- width: 300px;
- height:300px;
- position: fixed;
- top: 0;
- left:0;
- right:0;
- bottom:0;
- margin: auto;
- }
- .box{
- width: 150px;
- height:150px;
- position: relative;
- transform-style: preserve-3d;
- transform-origin: center center 75px;
- animation: myfirst 3s linear infinite alternate;
- }
- .box div{
- width: 100%;
- height:100%;
- position: absolute;
- top:0;
- left:0;
- font-size: 30px;
- text-align: center;
- line-height: 150px;
- border-radius: 5px;
- /*transform-style: preserve-3d;*/
- box-shadow: 0 0 50px 10px #fff ;
- opacity: 0.8;
- }
- @keyframes myfirst {
- from {
- transform: scale(0,0) skew(0) translate3d(0,0,0) rotateX(0deg) rotateY(0deg) rotateY(0deg);
- }
- to {
- transform: scale(2,2) skew(0deg) translate3d(10px,20px,30px) rotateX(360deg) rotateY(360deg) rotateY(360deg);
- }
- }
- .box div:nth-child(1){
- background: red;
- transform-origin: top;
- transform: rotateX(90deg);
- }
- .box div:nth-child(2){
- background: yellowgreen;
- transform-origin:left;
- transform: rotateY(-90deg);
- }
- .box div:nth-child(3){
- background: #000;
- }
- .box div:nth-child(4){
- background: orange;
- transform-origin:right;
- transform: rotateY(90deg);
- }
- .box div:nth-child(5){
- background: yellow;
- transform-origin: bottom;
- transform: rotateX(-90deg);
- }
- .box div:nth-child(6){
- background: dodgerblue;
- transform: translateZ(150px);
- }
- .dian6{
- width: 30px;
- height: 0;
- border-bottom:30px solid #fff;
- border-radius: 50%;
- margin-left: 16px;
- margin-top: 30px;
- float: left;
- }
- .dian5{
- width: 30px;
- height: 0;
- border-bottom:30px solid #fff;
- border-radius: 50%;
- }
- .dian5-tl{
- position: absolute;
- top: 20px;
- left:20px;
- }
- .dian5-tr{
- position: absolute;
- top: 20px;
- right:20px;
- }
- .dian5-bl{
- position: absolute;
- bottom: 20px;
- left:20px;
- }
- .dian5-br{
- position: absolute;
- bottom: 20px;
- right:20px;
- }
- .dian5-c{
- float: left;
- position: absolute;
- top: 0;left: 0;
- right:0;
- bottom: 0;
- margin: auto;
- }
- </style>
- <script>
- window.onload=function () {
- var cw=document.documentElement.clientWidth;
- var ch=document.documentElement.clientHeight;
- var box=document.querySelector(".box");
- document.onmousedown=function (e) {
- document.onmousemove=function (e) {
- var cx=e.clientX;
- var cy=e.clientY;
- var x=cx-cw/2;
- var y=cy-ch/2;
- var len=Math.sqrt((x-cw)*(x-cw)+(y-ch)*(y-ch));
- console.log(len,x,y)
- box.style.transform="rotate3d("+-y+","+x+",0,"+len+"deg)";
- return false;
- }
- document.onmouseup=function () {
- document.onmousemove=null;
- document.onmouseup=null;
- }
- }
- }
- </script>
- <body>
- <div class="sence">
- <div class="box">
- <div>
- <span class="dian5 dian5-c"></span>
- </div>
- <div>
- <span class="dian5 dian5-tl"></span>
- <span class="dian5 dian5-br"></span>
- </div>
- <div>
- <span class="dian5 dian5-tl"></span>
- <span class="dian5 dian5-c"></span>
- <span class="dian5 dian5-br"></span>
- </div>
- <div>
- <span class="dian5 dian5-tl"></span>
- <span class="dian5 dian5-tr"></span>
- <span class="dian5 dian5-bl"></span>
- <span class="dian5 dian5-br"></span>
- </div>
- <div>
- <span class="dian5 dian5-tl"></span>
- <span class="dian5 dian5-tr"></span>
- <span class="dian5 dian5-c"></span>
- <span class="dian5 dian5-bl"></span>
- <span class="dian5 dian5-br"></span>
- </div>
- <div>
- <span class="dian6"></span>
- <span class="dian6"></span>
- <span class="dian6"></span>
- <span class="dian6"></span>
- <span class="dian6"></span>
- <span class="dian6"></span>
- </div>
- </div>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/44460/af7f5e1aff45917c9cf69523a56d1f68.html