1

is transform : none computes to matrix(1,0,0,1,0,0) or something else

i want to reset transform , which approach is good for reset transform.

<style>
.box{
   height: 100px;
width: 100px;
background-color: red;
transition: 0.5s;
transform: translate(100px) rotate(45deg);
}
  / * approach one  */
.box:hover{
transform: none; /* dont know what does browser computes to transform: none*/
}
  / * 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 compute matrix(1,0,0,1,0,0) */
}
<style>

<div class="box">
</div>
code newbie
  • 43
  • 4

1 Answers1

2

which approach is good for reset transform.

That's not the right question to be asked because they are not the same to start with and this is very important.

From the specification:

Any computed value other than none for the transform affects containing block and stacking context, as described in § 2 The Transform Rendering Model.

Also

For elements whose layout is governed by the CSS box model, any value other than none for the transform property results in the creation of a stacking context.

The creation of stacking context is something you should be aware of because it can impact your layout.

Related: Why can't an element with a z-index value cover its child?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • transform: none; /* what does browser computes to transform: none ?*/ – code newbie Jun 01 '22 at 10:03
  • @codenewbie I already replied to this by saying it computes to *none*. Not sure what is not clear – Temani Afif Jun 01 '22 at 10:19
  • what does none means ? what matrix does it computes ? – code newbie Jun 01 '22 at 10:43
  • @codenewbie none means none, there is no matrix ... – Temani Afif Jun 01 '22 at 11:00
  • if transform none does not create matrix then how does it animate ? @keyframes animate{ 0%{transform: rotate(180deg;} 100%{transform:none}} – code newbie Jun 01 '22 at 11:19
  • @codenewbie maybe **you** need to learn more ;) read the Spec before giving me lessons. When dealing with animation we have a complete different story and in this case we use the "interpolation" to identify each transform: https://drafts.csswg.org/css-transforms/#interpolation-of-transforms – Temani Afif Jun 01 '22 at 15:11
  • thanks , If both Va and Vb are none: Vresult is none. what is va and vb here ? i did understand meaning of these – code newbie Jun 02 '22 at 05:20