如何实现Flex Box鼠标移出时反向旋转90度？

你的问题核心是transition属性仅在:hover状态下定义，导致鼠标移入时有过渡动画，但移出时元素没有过渡配置，直接跳回初始状态，看起来就像停留在旋转后的样子。

修改方案 #

1. 将transition属性移到flex子项的基础样式中，让元素在「移入hover」和「移出hover」两种状态切换时，都能应用过渡动画
2. 优化冗余CSS代码：三个子项的样式大部分重复，统一基础样式后再单独设置背景色即可

修改后的代码 #

CSS部分

#flex-container {
  display: flex;
  border: 2px solid black;
  padding: 10px;
  height: 300px;
  justify-content: space-around;
  flex-direction: row;
}

/* 统一所有flex子项的基础样式 */
.flex-item {
  border-radius: 10px;
  height: 50px;
  width: 50px;
  /* 在这里设置过渡，覆盖所有属性的变化 */
  transition: all 1000ms;
}

/* 单独为每个子项设置背景色 */
.flex-item:nth-child(1) {
  background-color: purple;
}

.flex-item:nth-child(2) {
  background-color: rgb(246, 166, 6);
}

.flex-item:nth-child(3) {
  background-color: rgb(248, 71, 7);
}

/* hover状态的样式 */
.flex-item:hover {
  cursor: pointer;
  border: 1px solid rgb(123, 251, 3);
  padding: 1px;
  transform: rotate(90deg);
}

HTML部分

<div id="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

效果说明 #

修改后，鼠标移入子项时会平滑旋转90度，移出时会平滑转回初始的0度状态。同时统一的基础样式让代码更简洁易维护，避免重复编写相同属性。

内容的提问来源于stack exchange，提问作者MD MOORSAHA - UL- ISLAM NOOR 2