我使用css3的3D變換制作了一個盒子，當我進入盒子的時候出現了閃爍的問題，請問怎么解決??？
問題描述
html代碼如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>3D</title> <link rel="stylesheet" type="text/css" href="./3D.css"/></head><body> <div class="wrap"><div class="box"> <div class="zq">朱雀</div> <div class="xw">玄武</div> <div class="ql">青龍</div> <div class="bh">白虎</div> <div class="yql">麒麟</div> <div class="ts">騰蛇</div></div> <div></body></html>
css代碼如下：
html,body,div{ margin:0; padding:0;}.wrap{ width:200px; height:200px; margin:600px auto 0 auto; perspective:500px; -webkit-perspective:500px; perspective-origin:50% 50%; -webkit-perspective-origin:50% 50%;}.box{ position:relative; width:200px; height:200px; transform:rotateX(0deg)translateZ(400px); -webkit-transform:rotateX(0deg)translateZ(400px); transform-style:preserve-3d; -webkit-transform-style:preserve-3d;}.box div{ position:absolute; width:200px; height:200px; line-height:200px; text-align:center; border:1px solid black;}.zq{ transform:translateZ(-100px)rotateY(180deg); -webkit-transform:translateZ(-100px)rotateY(180deg);}.xw{ transform:translateZ(100px); -webkit-transform:translateZ(100px);}.ql{ transform:rotateY(-90deg)translateZ(100px); -webkit-transform:rotateY(-90deg)translateZ(100px);}.bh{ transform:rotateY(90deg)translateZ(100px); -webkit-transform:rotateY(90deg)translateZ(100px);}.yql{ transform:rotateX(90deg)translateZ(100px); -webkit-transform:rotateX(90deg)translateZ(100px);}.ts{ transform:rotateX(-90deg)translateZ(100px); -webkit-transform:rotateX(-90deg)translateZ(100px);}@keyframes spin{ from{transform:translateZ(400px)rotateY(0deg);} to{transform:translateZ(400px)rotateY(360deg);}}@-webkit-keyframes spin{ from{-webkit-transform:translateZ(400px)rotateY(0deg);} to{-webkit-transform:translateZ(400px)rotateY(360deg);}}.box{ animation:spin 5s infinite linear; -webkit-animation:spin 5s infinite linear;}
預覽圖大致如下：
請問怎么解決這個問題??？
問題解答
回答1：其實不是閃爍的問題，只是這里translateZ(400px)太小了而已@keyframes spin{
from{transform:translateZ(400px)rotateY(0deg);}to{transform:translateZ(400px)rotateY(360deg);}
}@-webkit-keyframes spin{
from{-webkit-transform:translateZ(400px)rotateY(0deg);}to{-webkit-transform:translateZ(400px)rotateY(360deg);}
}改成：@keyframes spin{
from{transform:translateZ(420px)rotateY(0deg);}to{transform:translateZ(420px)rotateY(360deg);}
}@-webkit-keyframes spin{
from{-webkit-transform:translateZ(420px)rotateY(0deg);}to{-webkit-transform:translateZ(420px)rotateY(360deg);}
}
網公網安備