verwandeln + Übergang verursacht Sprung oder verschwommen Inhalt CSS

Question

Beginnen wir mit der Geige starten: http://jsfiddle.net/r1kw37g5/

.grid-item .diamond .inner-diamond{ 
    -webkit-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
      transform: rotate(45deg); 
    width: 394px; 
    height: 394px; 
    position: relative; 
    top: -23%; 
    left: -23%; 
} 

Die Situation ist ich ein rautenförmiges Gitter geschaffen. Dieses Gitter enthält Elemente, die um -45 Grad gedreht sind und einen Behälter, der um 45 Grad gedreht ist, um den Inhalt wieder gerade zu machen. (der Inhalt erscheint beim Schweben)

In diesem Container befindet sich eine Schaltfläche mit einer einfachen Animation, und hier beginnt das Problem. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird der andere Inhalt für eine Weile verschwommen, bis die Animation endet und ebenfalls einen 1px Sprung nach rechts macht.

Ich habe versucht: eine translateZ (0) auf den Container setzen, um es daran zu hindern, einen Sprung zu machen. Das funktioniert, aber macht den Inhalt ständig verschwommen. Ich habe versucht, den verschwommenen Inhalt mit der Zoom- und Skalierungs-Kombination preserve3d und font-smoothing zu bekämpfen, bisher aber kein Glück.

Die Frage ist, weiß jemand eine Art, in der ich den Knopf animieren kann, ohne dass es einen Sprung macht und ohne dass der andere Inhalt verschwommen wird?

Answer 1

scheint, gibt es ein Problem in der Animation (CSS transition effect makes image blurry/moves image 1px, in Chrome?)

ich den Text außerhalb der transform ‚s Element lassen werde.

1. setzen Sie Ihre .button innen .diamond
2. bewegen .inner-diamond ein Geschwister des .diamond zu sein, geben ihm eine opacity: 0 (entfernen .diamond-content ‚s opacity:0)
3. gesetzt pointer-events:none zum .inner-diamond

Einsatz Geschwistermethode, um es zu erfüllen

.diamond:hover + .inner-diamond { 
    opacity: 1 
} 

eine kurze Demo (Layout nicht recht): http://jsfiddle.net/r1kw37g5/6/