Does the transform: none result in matrix(1,0,0,1,0,0) or a different outcome?
I am looking to reset the transform; what is the best approach for this?
<style>
.box{
height: 100px;
width: 100px;
background-color: red;
transition: 0.5s;
transform: translate(100px) rotate(45deg);
}
/* Approach one */
.box:hover{
transform: none; /* Unsure of the resulting transformation by the browser */
}
/* Approach two */
.box:hover{
transform: translate(0) rotate(0); /* Browser computes matrix(1,0,0,1,0,0) */
}
/* Approach three */
.box:hover{
transform: translate(0); /* Browser calculates matrix(1,0,0,1,0,0) */
}
<style>
<div class="box">
</div>