如何旋转角度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会丢失它的角度。是否可以在不丢失角度的情况下旋转模具？ 我也尝试rotate3d()，但也不适合我。任何帮助都会受到赞赏...... !!!

Answer 1

只是一个小小的修正。将您的JS ID dieo更改为die。 LiveFiddle 我在小提琴上添加了自己的jQuery。

＆＃13;

＆＃13;

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

＆＃13;

#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);
    }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;