CSS3 transform rotate causing 1px shift in Chrome

Actually just add this to the site container which holds all the elements:-webkit-backface-visibility: hidden;

Should fix it!

Gino

I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:

-webkit-backface-visibility: hidden;-webkit-transform: translateZ(0) scale(1.0, 1.0);

Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.

there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.

Anyway, I will suggest this approach instead:

body{  width:100%;  float:left;}.wrap {  margin: 50px 45%;  width: 5%;  float: left;}.block {  width:30px;  height:30px;  background:black;}.target,.block {  -webkit-transition: all 0.4s ease;  -moz-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;}.target:hover,.block:hover {-webkit-transform: rotate(90deg);     -moz-transform: rotate(90deg);     -o-transform: rotate(90deg);    -ms-transform: rotate(90deg);  }

Here is the updated fiddle