css | scss iç içe transition kullanım sorunu
merhaba arkadaşlar,
<a href="#" class="btn btn-outline-warning px-2">Profili görüntüle <i class="fa-solid fa-angles-right ms-1"></i></a>
a {
align-self: flex-end;
padding: 3px 8px;
font-family: 'Mulish', sans-serif;
font-size: 15px;
box-shadow: $shadow-sm;
transition: .5s all;
i {
transition: .4s all;
}
&:hover {
color: $white;
i {
transform: rotateX(180deg) rotateY(180deg);
}
}
}
şu şekilde bir yapım var. "<b>a</b>" etiketi hover olunca a etiketinin rengini değiştiriyorum. geçişli olması için transition kullandım. a hover olunca da içerisinde ki "<b>i</b>" etiketinede transform işlemi uyguluyorum. i etiketinin kendisine de transition verince bir gecikme oluyor a etiketinde de transition olduğu için bunu benmi yanlış kullanıyorum yoksa bir çözümü var mı?
@rotalie hover için animation kullanabilirsin, öyle bi yazdın ki kendimden şüphe ettim hover da animation kullanılmıyor mu diye. alternatif bir kullanım fikiri idi benimki, neyse dediğin gibi olsun;
a{
align-self: flex-end;
padding: 3px 8px;
font-family: 'Mulish', sans-serif;
font-size: 15px;
box-shadow: $shadow-sm;
transition: .5s all;
}
a i {
transition: all .4s;
}
a i:hover{
display: inline-block;
color: $white;
transform: rotateX(180deg) rotateY(180deg);
}
<a>Profili görüntüle <i>test</i></a>
sanırım scss hali de şöyle
a {
align-self: flex-end;
padding: 3px 8px;
font-family: 'Mulish', sans-serif;
font-size: 15px;
box-shadow: $shadow-sm;
transition: .5s all;
i {
transition: all .4s;
&:hover {
display: inline-block;
color: $white;
transform: rotateX(180deg) rotateY(180deg);
}
}
}
not: bence Y eksenini eksi yapmayı dene, daha güzel dönüyor.