I created three flex boxes and added a transform that rotates 90 degrees when hovered over. However, I want to see it rotate back when I move my mouse away from the box. Here is the code:
#flex-container {
display: flex;
border: 2px solid black;
padding: 10px;
height: 300px;
justify-content: space-around;
flex-direction: row;
}
#flex-container :hover {
cursor: pointer;
border: 1px solid rgb(123, 251, 3);
padding: 1px;
transform: rotate(90deg);
transition: 1000ms;
}
.flex-item {
border-radius: 10px;
background-color: purple;
height: 50px;
width: 50px;
}
.flex-item1 {
border-radius: 10px;
background-color: rgb(246, 166, 6);
height: 50px;
width: 50px;
}
.flex-item2 {
border-radius: 10px;
background-color: rgb(248, 71, 7);
height: 50px;
width: 50px;
}<div id="flex-container">
<div class="flex-item"></div>
<div class="flex-item1"></div>
<div class="flex-item2"></div>
</div>Currently, it only rotates 90 degrees and stays there. What I really want is for it to rotate back 90 degrees when I move my mouse away. I am new to learning this so please excuse any mistakes in my language. Thank you.