英文:
how to rotate back the flex box
问题
我已经创建了三个弹性盒子，并在鼠标悬停时添加了一个旋转90度的变换。但我希望当我把鼠标从盒子上移开时，它能旋转回来。以下是代码：
#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>
目前它只旋转90度然后停止，但我希望当我把鼠标移开时它能旋转回去90度。我是一个非常新的学习者，请谅解我的语言错误。谢谢。
英文:
i have made three flex box. and add a transform that rotate 90 degree when hover over. but i want to see that it rotate back when i put my mouse from the box. so here is the code.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#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;
}
<!-- language: lang-html -->
<div id="flex-container">
<div class="flex-item"></div>
<div class="flex-item1"></div>
<div class="flex-item2"></div>
</div>
<!-- end snippet -->
it only rotate 90 degree and stop. but i want to see that it rotate back 90 degree when i put away my mouse.
i am a very new learner please consider my mistakes in language. thanks.
答案1
得分: 1
将您的过渡效果从鼠标悬停移至您的flex-items，然后当您将鼠标移出时，它将过渡回来。
我还建议您为flex-items使用一个共享的类，这样您就不需要多次重复编写相同的CSS。
#flex-container {
display: flex;
border: 2px solid black;
padding: 10px;
height: 300px;
justify-content: space-around;
flex-direction: row;
}
.flex-item {
border-radius: 10px;
height: 50px;
width: 50px;
transition: 1000ms;
}
.flex-item:hover {
cursor: pointer;
border: 1px solid rgb(123, 251, 3);
padding: 1px;
transform: rotate(90deg);
}
.flex-item--1 {
background-color: purple;
}
.flex-item--2 {
background-color: rgb(246, 166, 6);
}
.flex-item--3 {
background-color: rgb(248, 71, 7);
}
<div id="flex-container">
<div class="flex-item flex-item--1"></div>
<div class="flex-item flex-item--2"></div>
<div class="flex-item flex-item--3"></div>
</div>
英文:
Move your transition from your hover to your flex-items, then when you take your mouse out, it will transition back.
I would also make use of a shared class for your flex items so you are not repeating your css multiple times
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#flex-container {
display: flex;
border: 2px solid black;
padding: 10px;
height: 300px;
justify-content: space-around;
flex-direction: row;
}
.flex-item {
border-radius: 10px;
height: 50px;
width: 50px;
transition: 1000ms;
}
.flex-item:hover {
cursor: pointer;
border: 1px solid rgb(123, 251, 3);
padding: 1px;
transform: rotate(90deg);
}
.flex-item--1 {
background-color: purple;
}
.flex-item--2 {
background-color: rgb(246, 166, 6);
}
.flex-item--3 {
background-color: rgb(248, 71, 7);
}
<!-- language: lang-html -->
<div id="flex-container">
<div class="flex-item flex-item--1"></div>
<div class="flex-item flex-item--2"></div>
<div class="flex-item flex-item--3"></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论