dream hunter dream hunter - 11 days ago 6
CSS Question

How to spin an angled div?



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>





In the above code ,I'm trying to spin the div "die".But when I click on the button the div losses it's angle.Is it possible to spin the die without lost it's angle?
I'm also tried
rotate3d()
but which also not works for me.any help will get appreciated...!!!

Answer

Just a small correction. Change in your JS ID dieo to die. LiveFiddle I add my own jQuery on fiddle.

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>