想书写一个就是上方是个模型旋转，下方是个太极旋转的图，我是把下方太极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>
