Ik wil de afbeelding draaien die in de knop van de schuifbalk in Chrome is geplaatst. Nu heb ik een CSS met deze inhoud:
::-webkit-scrollbar-button:vertical:decrement {
background-image: url(images/arrowup.png);
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
background-repeat: no-repeat;
background-position: center;
background-color: #ECEEEF;
border-color: #999;
}
Ik wil de afbeelding draaien zonder de inhoud te roteren.
Antwoord 1, autoriteit 100%
Heel goed gedaan en hier beantwoord – http://www.sitepoint.com/ css3-transform-background-image/
#myelement:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
background: url(background.png) 0 0 repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
Antwoord 2, autoriteit 15%
Zeer eenvoudige methode, je draait de ene kant op en de inhoud de andere kant op. Vereist wel een vierkant
#element{
background : url('someImage.jpg');
}
#element:hover{
transform: rotate(-30deg);
}
#element:hover >*{
transform: rotate(30deg);
}
Antwoord 3, autoriteit 6%
Update 2020, mei:
Instellen van position: absoluteen vervolgens transform: rotate(45deg)levert een achtergrond op:
div {
height: 200px;
width: 200px;
outline: 2px dashed slateBlue;
overflow: hidden;
}
div img {
position: absolute;
transform: rotate(45deg);
z-index: -1;
top: 40px;
left: 40px;
}<div>
<img src="https://placekitten.com/120/120" />
<h1>Hello World!</h1>
</div>Antwoord 4, Autoriteit 4%
CSS:
.reverse {
transform: rotate(180deg);
}
.rotate {
animation-duration: .5s;
animation-iteration-count: 1;
animation-name: yoyo;
animation-timing-function: linear;
}
@keyframes yoyo {
from { transform: rotate( 0deg); }
to { transform: rotate(360deg); }
}
JavaScript:
$(buttonElement).click(function () {
$(".arrow").toggleClass("reverse")
return false
})
$(buttonElement).hover(function () {
$(".arrow").addClass("rotate")
}, function() {
$(".arrow").removeClass("rotate")
})
PS: Ik heb dit ergens anders gevonden, maar onthoud niet de bron
Antwoord 5, Autoriteit 3%
Ik was ook op zoek om dit te doen. Ik heb een grote tegel (letterlijk een beeld van een tegel) beeld dat ik zou willen draaien met slechts ongeveer 15 graden en herhaald is. Je kunt je de grootte van een afbeelding voorstellen die naadloos zou herhalen, waardoor het ‘beeldbewerkingsprogramma’ nutteloos wordt gemaakt.
Mijn oplossing was de niet-geroteerde (slechts één exemplaar 🙂 tegel afbeelding naar psuedo: vóór het element – overmaat het – herhaal het – stel de containeroverloop in op verborgen – en draai het gegenereerd: vóór het element met behulp van CSS3-transformaties. BOSH!