如何旋转有角度的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>

在上面的代码中，我试图旋转 div “die”。但是当我点击按钮时，div 失去了它的角度。是否可以旋转 die 而不会失去它的角度？强> 我也尝试过rotate3d()，但这对我也不起作用。任何帮助都会得到赞赏...！！！

Answer 1

只是一个小的修正。改变你的JS ID dieo 呀。 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>