记忆游戏卡无法正确翻转
Memory game cards not flipping properly
我的记忆游戏中卡片的背面没有正确翻转。当我将鼠标悬停在任何卡片的正面时,卡片背面的一半图像先出现在另一半之前,就好像图像被对折了一样。而且看起来不像是在翻转。我的代码需要更改什么?
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body {
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1 {
color: black
}
h1:hover {
color: blue;
}
.game {
perspective: 1000;
}
.card {
display: inline-block;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card:hover {
/* border: 5px solid aqua; */
border-radius: 10px;
transform: scale(0.97);
transition: transform .2s;
}
.card:hover .card-back {
transform: rotateY(0);
background-color: white;
}
.card:hover .card-front {
transform: rotateY(-180deg);
transition: transform 300ms ease-in;
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.card-back {
transform: rotateX(180deg);
}
.overlay {
font-size: 20px;
visibility: hidden;
}
<h1>Memory Game</h1>
<section class="game">
<div class="row">
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">
</div>
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">
</div>
</div>
</div>
<div class="row">
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>
我想我注释了我的更改,但简而言之:
- 我禁用了
preserve-3d
,因为它添加了一个不受欢迎的剪裁效果(我认为)。 Re-enable 看看区别吧
- 我在
.card-back
选择器中将 rotateX
更改为 rotateY
,因为它旋转的方向错误。我也把那个调高了,但那主要是为了我自己。
- 我将
transition
设置移到了非 :hover
选择器中,因此转换会同时发生“onHover
”和“offHover
”。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body {
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1 {
color: black
}
h1:hover {
color: blue;
}
.game {
perspective: 1000;
}
.card {
display: inline-block;
position: relative;
transform: scale(1);
/* I'm not too familiar with preserve-3d, but with it on,
everything clipped. Off worked better, it seems. */
/* transform-style: preserve-3d; */
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card:hover {
/* border: 5px solid aqua; */
border-radius: 10px;
transform: scale(0.97);
transition: transform .2s;
}
.card-back {
/* You had rotateX here */
transform: rotateY(180deg);
background-color: white;
}
.card .card-back,
.card .card-front {
/* Transitions should not be on the :hover-selectors,
otherwise they're only active during hover */
transition: transform 300ms ease-in;
}
.card:hover .card-back {
transform: rotateY(0);
}
.card:hover .card-front {
transform: rotateY(-180deg);
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.overlay {
font-size: 20px;
visibility: hidden;
}
<h1>Memory Game</h1>
<section class="game">
<div class="row">
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">
</div>
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">
</div>
</div>
</div>
<div class="row">
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>
我的记忆游戏中卡片的背面没有正确翻转。当我将鼠标悬停在任何卡片的正面时,卡片背面的一半图像先出现在另一半之前,就好像图像被对折了一样。而且看起来不像是在翻转。我的代码需要更改什么?
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body {
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1 {
color: black
}
h1:hover {
color: blue;
}
.game {
perspective: 1000;
}
.card {
display: inline-block;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card:hover {
/* border: 5px solid aqua; */
border-radius: 10px;
transform: scale(0.97);
transition: transform .2s;
}
.card:hover .card-back {
transform: rotateY(0);
background-color: white;
}
.card:hover .card-front {
transform: rotateY(-180deg);
transition: transform 300ms ease-in;
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.card-back {
transform: rotateX(180deg);
}
.overlay {
font-size: 20px;
visibility: hidden;
}
<h1>Memory Game</h1>
<section class="game">
<div class="row">
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">
</div>
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">
</div>
</div>
</div>
<div class="row">
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>
我想我注释了我的更改,但简而言之:
- 我禁用了
preserve-3d
,因为它添加了一个不受欢迎的剪裁效果(我认为)。 Re-enable 看看区别吧 - 我在
.card-back
选择器中将rotateX
更改为rotateY
,因为它旋转的方向错误。我也把那个调高了,但那主要是为了我自己。 - 我将
transition
设置移到了非:hover
选择器中,因此转换会同时发生“onHover
”和“offHover
”。
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: 'Bungee Shade', cursive;
background-color: cornflowerblue;
}
body {
height: 100vh;
text-align: center;
font-size: 40px;
overflow: hidden;
}
h1 {
color: black
}
h1:hover {
color: blue;
}
.game {
perspective: 1000;
}
.card {
display: inline-block;
position: relative;
transform: scale(1);
/* I'm not too familiar with preserve-3d, but with it on,
everything clipped. Off worked better, it seems. */
/* transform-style: preserve-3d; */
transition: transform .5s;
width: 130px;
height: 130px;
background-color: black;
border: 5px double #000000;
border-radius: 10px;
cursor: pointer;
margin: auto;
perspective: 500px;
transition: transform 500ms ease-in-out;
}
.card:hover {
/* border: 5px solid aqua; */
border-radius: 10px;
transform: scale(0.97);
transition: transform .2s;
}
.card-back {
/* You had rotateX here */
transform: rotateY(180deg);
background-color: white;
}
.card .card-back,
.card .card-front {
/* Transitions should not be on the :hover-selectors,
otherwise they're only active during hover */
transition: transform 300ms ease-in;
}
.card:hover .card-back {
transform: rotateY(0);
}
.card:hover .card-front {
transform: rotateY(-180deg);
}
.card-front,
.card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
justify-content: center;
align-items: center;
display: flex;
}
.overlay {
font-size: 20px;
visibility: hidden;
}
<h1>Memory Game</h1>
<section class="game">
<div class="row">
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Clipart.png">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Free-Download.png">
</div>
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG-Image.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="https://www.pngall.com/wp-content/uploads/5/Real-Monster-PNG.png">
</div>
</div>
</div>
<div class="row">
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster8">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="2" img src="monster8.png">
</div>
<div class="card" id="monster1">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="1" img src="monster1.png">
</div>
</div>
<div class="row">
<div class="card" id="monster3">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="3" img src="monster3.png">
</div>
<div class="card" id="monster5">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="5" img src="monster5.jpg">
</div>
<div class="card" id="monster4">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="4" img src="monster4.jpg">
</div>
<div class="card" id="monster6">
<img class="card-front" img src="https://www.pngall.com/wp-content/uploads/5/Monster-PNG.png">
<img class="card-back" type="6" img src="monster6.png">
</div>
</div>
</section>