CSS Onmouseover rotate élément enfant

Question

J'ai dans le code suivant que lorsque vous passez la souris sur l'élément clid, il est en rotation. Je veux que le parent et l'enfant déclenchent la rotation en vol stationnaire.

https://jsfiddle.net/d4sbvmb0/

.parent { 
 
    width: 250px; 
 
    height: 250px; 
 
    background: silver; 
 
    padding: 25px; 
 
} 
 

 
.child { 
 
    background: red; 
 
    border-radius: 2% 50%; 
 
    height: 100px; 
 
    margin: 100px; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease-in-out; 
 
    width: 100px; 
 
} 
 

 
.child:hover { 
 
    transform: rotate(20deg); 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 1

Si vous avez seulement besoin de l'élément parent pour déclencher la rotation de l'enfant simplement modifier le sélecteur contenant la transformation .child:hover-.parent:hover .child. Avec ce dernier nous disons, lorsque le .parent est plané, sélectionnez le .child et le faire pivoter.

.parent { 
 
    width: 250px; 
 
    height: 250px; 
 
    background: silver; 
 
    padding: 25px; 
 
} 
 

 
.child { 
 
    background: red; 
 
    border-radius: 2% 50%; 
 
    height: 100px; 
 
    margin: 100px; 
 
    transition: all 0.5s; 
 
    transition-timing-function: ease-in-out; 
 
    width: 100px; 
 
} 
 

 
.parent:hover .child { 
 
    transform: rotate(20deg); 
 
} 
 

 
/* Add me if you want additional rotation when both are hovered. */ 
 
/* 
 
.parent:hover .child:hover { 
 
    transform: rotate(40deg); 
 
} 
 
*/

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Note:transition-timing devrait être transition-timing-function.

Answer 2

essayer cette

.parent:hover .child { 
    transform: rotate(20deg); 
}