Image transform rotieren nicht rotieren

Ich versuche, ein Bild von einem X zu bekommen Ich muss um 180 Grad drehen, wenn es überschwebt, aber es bewegt sich nur nach oben und nach rechts, anstatt zu drehen.Image transform rotieren nicht rotieren

Was mache ich falsch, dass dies nicht so aussieht, als würde es um 180 Grad drehen?

.black { 
 
    background: #000; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.popup-close { 
 
    position: absolute; 
 
    top: 40px; 
 
    right: 40px; 
 
} 
 
#x-close:hover { 
 
    -webkit-transform: translate(50%, -50%) rotate(180deg); 
 
    transform: translate(50%, -50%) rotate(180deg); 
 
}

<div class="black"> 
 
    <a class="popup-close" data-popup-close="popup-1" href="#"> 
 
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close"> 
 
    </a> 
 
</div>

Quelle

2016-04-30 Becky

Haben Sie versucht, einen Übergangswert hinzuzufügen? versuche, '# x-close {Übergang: alle 400ms Leichtigkeit;}' zu deinem CSS hinzuzufügen – Aeolingamenfel

Du verwendest auch translate, um das Zentrum zu verschieben, sodass die Drehung in der Mitte fixiert wird .. also nach der Rotation musst du das umkehren Übersetzung, um es wieder an den gleichen Ort (aber gedreht). Ich weiß nicht, ob Sie css translate/rotieren können, wie das obwohl ... – PeteB

Das Übergangstiming half. Also, @PeteB sagst du etwas wie '# x-close: hover after {}' dann etwas? – Becky

Das Kreuz bewegt sich nach oben (und rechts) wegen der translate Transformation, die Sie hinzufügen, wenn es schwebt wird. Ich glaube, dass Sie dies hinzufügen, um das Element zu zentrieren, und in diesem Fall ist es besser, dass es dem Standardzustand des Elements selbst hinzugefügt wird.

Die drehen geschieht eigentlich aber Sie sind seing es nicht, weil ein 180 Grad drehen eines Kreuzes die gleiche Leistung gibt. Sie können einen Übergang hinzufügen, um die Drehung zu sehen (oder) den Drehwinkel zu ändern.

.black { 
 
    background: #000; 
 
    width: 100%; 
 
    height: 400px; 
 
} 
 
.popup-close { 
 
    position: absolute; 
 
    top: 40px; 
 
    right: 40px; 
 
} 
 
#x-close { 
 
    transform: translate(50%, -50%); 
 
    transition: transform 1s ease; 
 
} 
 
#x-close:hover { 
 
    -webkit-transform: translate(50%, -50%) rotate(180deg); 
 
    transform: translate(50%, -50%) rotate(180deg); 
 
}

<div class="black"> 
 
    <a class="popup-close" data-popup-close="popup-1" href="#"> 
 
    <img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close"> 
 
    </a> 
 
</div>

Quelle

2016-04-30 05:21:44 Harry

Danke Harry! Das funktioniert perfekt. – Becky

Dies sollte es tun:

#x-close:hover { 
    -webkit-transform: rotate(180deg); 
    transform: rotate(180deg); 
    -webkit-transition: transform 0.5s ease;  
    transition: transform 0.5s ease; 
}

Quelle

2016-04-30 05:20:06

Wird sich das aber nicht um die untere linke Ecke drehen? – PeteB

Arbeits Demo

diese CSS in Ihrem Code ist hinzuzufügen:

#x-close{ 
     -webkit-transition: -webkit-transform .8s ease-in-out; 
     transition: transform .8s ease-in-out; 
     -webkit-transform: translate(50%, -50%); 
     transform: translate(50%, -50%) ; 
    }

Quelle

2016-04-30 05:21:58 Logz

Hier ist meine Lösung

@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(180deg); } 
} 
@-moz-keyframes spin { 
    100% { -moz-transform: rotate(180deg); } 
} 
@keyframes spin { 
    100% { 
     -moz-transform:rotate(180deg); 
     -o-transform:rotate(180deg); 
     transform:rotate(180deg); 
    } 
}

https://jsfiddle.net/hk2ums6p/

Quelle

2016-04-30 05:22:58 Atula

Image transform rotieren nicht rotieren

Antwort

Verwandte Themen