如何旋轉角度的div？

Question

document.getElementById("btn").addEventListener("click",function(){ 
 
    document.getElementById("dieo").classList.add("roll"); 
 
});

#die{ 
 
    width: 100%; 
 
    height: 120px; 
 
    /*background-color: yellowgreen;*/ 
 
    float: left; 
 
} 
 

 
#dieo{ 
 
    background-color: #fff; 
 
    border: 1px solid #000; 
 
    transform: rotate(45deg); 
 
    width: 60px; 
 
    height: 60px; 
 
    color: #000; 
 
    margin-left: auto ! important; 
 
    margin-right: auto ! important; 
 
    border-radius: 8px; 
 
    margin-top: 27px; 
 
} 
 
#d61{ 
 
    margin-left: 5px; 
 
    margin-top: 5px; 
 
} 
 
#d62{ 
 
    margin-left: -14px; 
 
    margin-top: 41px; 
 
} 
 
#d63{ 
 
    margin-left: 23px; 
 
    margin-top: 5px; 
 
} 
 
#d64{ 
 
    margin-left: 22px; 
 
    margin-top: 22px; 
 
} 
 
#d65{ 
 
    margin-left: 24px; 
 
    margin-top: -50px; 
 
} 
 
#d66{ 
 
    margin-left: 24px; 
 
    margin-top: -14px; 
 
} 
 
.dot{ 
 
    width: 14px; 
 
    height: 14px; 
 
    background-color: #000; 
 
    border-radius: 50%; 
 
    float: left; 
 
} 
 
.roll{ 
 
    animation: roll 0.3s linear 10; 
 
} 
 
@keyframes roll{ 
 
    0%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(30deg); 
 
    } 
 
    25%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(60deg); 
 
} 
 
    50%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(90deg); 
 
    } 
 
    75%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(60deg); 
 
    } 
 
    100%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(30deg); 
 
    } 
 
}

<div id="die"> 
 
    <div id="dieo"> 
 
     <div id="d6"> 
 
      <div id="d61" class="dot"></div> 
 
      <div id="d62" class="dot"></div> 
 
      <div id="d63" class="dot"></div> 
 
      <div id="d64" class="dot"></div> 
 
      <div id="d65" class="dot"></div> 
 
      <div id="d66" class="dot"></div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<button type="button" id="btn"> ROLL </button>

在上面的代碼中，我試圖以紡成格「死」。可是，當我點擊按鈕的股利損失它的角度。 是否有可能旋轉死亡而不失去角度？ 我也試過rotate3d()但它也不適合我。任何幫助將得到讚賞......！

Answer 1

只是一個小小的更正。改變你的JS ID死亡。 LiveFiddle 我在小提琴上添加了我自己的jQuery。

document.getElementById("btn").addEventListener("click",function(){ 
 
    document.getElementById("die").classList.add("roll"); 
 
});

#die{ 
 
    width: 100%; 
 
    height: 120px; 
 
    /*background-color: yellowgreen;*/ 
 
    float: left; 
 
} 
 

 
#dieo{ 
 
    background-color: #fff; 
 
    border: 1px solid #000; 
 
    transform: rotate(45deg); 
 
    width: 60px; 
 
    height: 60px; 
 
    color: #000; 
 
    margin-left: auto ! important; 
 
    margin-right: auto ! important; 
 
    border-radius: 8px; 
 
    margin-top: 27px; 
 
} 
 
#d61{ 
 
    margin-left: 5px; 
 
    margin-top: 5px; 
 
} 
 
#d62{ 
 
    margin-left: -14px; 
 
    margin-top: 41px; 
 
} 
 
#d63{ 
 
    margin-left: 23px; 
 
    margin-top: 5px; 
 
} 
 
#d64{ 
 
    margin-left: 22px; 
 
    margin-top: 22px; 
 
} 
 
#d65{ 
 
    margin-left: 24px; 
 
    margin-top: -50px; 
 
} 
 
#d66{ 
 
    margin-left: 24px; 
 
    margin-top: -14px; 
 
} 
 
.dot{ 
 
    width: 14px; 
 
    height: 14px; 
 
    background-color: #000; 
 
    border-radius: 50%; 
 
    float: left; 
 
} 
 
.roll{ 
 
    animation: roll 0.3s linear 10; 
 
} 
 
@keyframes roll{ 
 
    0%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(30deg); 
 
    } 
 
    25%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(60deg); 
 
} 
 
    50%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(90deg); 
 
    } 
 
    75%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(60deg); 
 
    } 
 
    100%{ 
 
     transform: rotateX(45deg); 
 
     transform: rotateY(30deg); 
 
    } 
 
}

<script></script> 
 
<div id="die"> 
 
    <div id="dieo"> 
 
     <div id="d6"> 
 
      <div id="d61" class="dot"></div> 
 
      <div id="d62" class="dot"></div> 
 
      <div id="d63" class="dot"></div> 
 
      <div id="d64" class="dot"></div> 
 
      <div id="d65" class="dot"></div> 
 
      <div id="d66" class="dot"></div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<button type="button" id="btn"> ROLL </button>