CSS3 Übergang auf einem Hintergrundbild
-
26-10-2019 - |
Frage
Ich möchte eine CSS3 -Transformation durchführen: Drehen (360 Grad); in einem Übergang 1s; Auf einem Hintergrundbild anstelle eines separaten Bildes (Element). Ist das möglich? Ich habe die Hölle aus Google durchsucht, aber keine Erfolgsspiele! Was ich zu erreichen versuche, ist so etwas wie:
#footerLogo {
background: url('ster.png'),
-moz-transition: -moz-transform 1s,
transition: transform 1s,
-o-transition: -o-transform 1s,
-webkit-transition: -webkit-transform 1s;
background-position: #outlinedtotheleft;
}
#footerLogo:hover {
background: transform: rotate(360deg);
-o-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}
Ich hoffe das ist möglich! Ich weiß, dass es in JS (jQuery) leicht machbar ist mit:
$('#something').hover(function(){morecodehere});
... aber ich möchte wissen, ob es mit nur CSS möglich ist (3)
HTML:
<div id="footerLogo">
<img src="carenza.png"/>
</div>
Lösung
Sicher, probieren Sie so etwas aus:
Html
<div id="planet">
</div>
CSS
#planet {
width:200px;
height:200px;
background: transparent url(http://cdn3.iconfinder.com/data/icons/nx11/Internet%20-%20Real.png) no-repeat center center;
}
#planet {
-webkit-animation-name: rotate;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-name: rotate;
-moz-animation-duration:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform:rotate(0deg);}
to { -webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotate {
from {-moz-transform:rotate(0deg);}
to { -moz-transform:rotate(360deg);}
}
Andere Tipps
Ich glaube nichtHier ist ein funktionierendes Beispiel.)
Es könnte helfen, wenn Sie den genauen Effekt beschreiben könnten, den Sie erzielen möchten?
Code:
#footerlogo {
width: 200px;
height: 200px;
background-image: url(http://lorempixum.com/200/200);
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
transition: transform 1s;
}
#footerlogo:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow