求HTML5解答关于canvas旋转的问题

想书写一个就是上方是个模型旋转,下方是个太极旋转的图,我是把下方太极vasrotx会画的,rotatex来偏转一个角度来实现立体效果,但是如果我如果旋转太极图,就会和预想的不一样,求教<!doctype html>

 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 <html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <script>
   window.onload = function() {
    var cvs = document.getElementById("luopan");
    ctx = cvs.getContext("2d");

    ctx.fillStyle="#fff";
    ctx.beginPath(); 
    ctx.arc(200, 200, 150, 1.5*Math.PI, Math.PI/2, false);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle="#000";
    ctx.beginPath(); 
    ctx.arc(200, 200, 150, Math.PI/2, 1.5*Math.PI, false);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle="#000";
    ctx.beginPath(); 
    ctx.arc(200, 275, 75, 0, Math.PI*2, false); 
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle="#fff";
    ctx.beginPath(); 
    ctx.arc(200, 125, 75, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill();


    ctx.fillStyle="#fff";
    ctx.beginPath(); 
    ctx.arc(200, 275, 10, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle="#000";
    ctx.beginPath(); 
    ctx.arc(200, 125, 10, 0, Math.PI*2, false);
    ctx.closePath();
    ctx.fill();

    ctx.globalAlpha = 0.2;  


    ctx.fillStyle = "#f00";
    ctx.font = "32pt Arial";
    ctx.fillText("阳", 220, 200);
    ctx.fillText("阴", 100, 250);
    ctx.globalAlpha = 1.0; 
    ctx.shadowOffsetX = 2;  
    ctx.shadowOffsetY = 2;  
    ctx.shadowBlur = 2;  
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";  
    ctx.fillStyle = "#000";

  };
  </script>
  <style>
        body {
            background:url(4.gif);
            background-size:cover;
        }

        .box{
                width: 249px;
                height: 249px;
                border: 1px dashed #000;
                margin: 120px auto;
                border-radius: 250px;
                position: relative;
                transform-style: preserve-3d;
                transform:rotateX(30deg) rotateY(-30deg); 


                animation: gun 10s linear infinite;
        }



        .box::before,.box::after{
                content: "";
                width: 50px;
                height: 80px;
                background: pink;
                position: absolute;
                border-radius: 50px 50px 0 0;
                top: 50%;
                left: 50%;
        }
        .box::before{
                transform: rotate(-45deg);
                margin-left: -36px;
                margin-top: -40px;
        }
        .box::after{
                transform: rotate(45deg);               
                margin-left: -16px;
                margin-top: -40px;
        }

        @keyframes gun{
                0%{
                        transform:rotateX(360deg) rotateY(0deg)
                }
                100%{
                        transform:rotateX(0deg) rotateY(360deg)
                }
        }

        .box > div{
                width: 100%;
                height: 100%;               
                text-align: center;               
                line-height: 250px;
                font-size: 60px;
                position: absolute;
                color: #fff;
        }
        .left{
                background-color: rgba(0,0,0,0.3);
                transform-origin: left;
                transform: rotateY(-90deg) translateX(-125px);
        }

        .right{
                background-color:rgba(196,55,97,0.2);
                transform-origin: right;
                transform: rotateY(90deg)translateX(125px);
        }

        .forward{
                background-color: rgba(55,196,118,0.3);
                 transform: translateZ(125px);
        }

        .back{
                background-color: rgba(0,125,125,0.3);
                transform: rotateY(-180deg) translateZ(125px);
        }

        .up{
                background-color: rgba(251,255,0,0.4);
                transform: rotateX(90deg) translateZ(125px);
        }

        .down{
                background-color: rgba(68,255,0,0.4);
                transform: rotateX(-90deg) translateZ(125px);
        }


   #luopan{
    opacity:0.4;
    filter:alpha(opacity=40);
    transform-style: preserve-3d;
    position: absolute;
    left:350px;
    top:250px;
    transform:rotatex(280deg);
    animation:FD 1s linear 0s infinite;}

    @keyframes FD

    {0%   {transform:scale(1.3,1.3);}
    25%   {transform:scale(1.5,1.5);}
    100%  {transform:scale(1,1);}
    }
    ;




  </style>
</head>
 <body >
  <div class = "box">
        <div class = "up">金</div>
        <div class = "down">木</div>
        <div class = "left">水</div>
        <div class = "right">火</div>
        <div class = "forward">土</div>
        <div class = "back">五行</div>

 </div>
<canvas id="luopan" width="400" height="400" "></>
</canvas>

</body>
</html>

1个回答

首先,贴代码的时候走点心,大兄弟!!!!无力吐槽!!!
transform:scale,是二维大小变换,而你要的事3D效果,所以就不能用了,而要用transform:scale3d。经我测试,使用了大小变换后,
transform:rotateX(280deg);就无效了。
你的代码将其删掉,然后将FD改为如下应该就可以了:
0% {
transform: scale3d(1.3,1.3,1.3) rotateX(280deg);
}
25% {
transform: scale3d(1.5,1.5,1.5) rotateX(280deg);
}
100% {
transform: scale3d(1,1,1) rotateX(280deg);
}

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问