为什么 img 和按钮之间有 space，为什么悬停动画不起作用？

Question

当我运行下面的文件时，img 和按钮之间有 space，为什么以及如何解决这个问题？

另外，当我将鼠标悬停在 div 上时似乎没有动画，但光标确实改变了形状，那么为什么其他 CSS 规则也不起作用？ transform: rotateY: (360deg); 实际上似乎有点作用，但看起来作用很小。

body {
  margin: 0%;
}

#Homepage {
  margin: 5%;
  font-family: sans-serif;
}

#Homepage .selection {
  width: 40%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 5px solid;
  border-radius: 20px;
  overflow: hidden;
}

#Homepage .selection :hover {
  cursor: pointer;
  bottom: 100;
  transform: rotateY(360deg);
}

#Homepage .selection img {
  box-sizing: border-box;
  width: 100%;
}

#Homepage .selection button {
  width: 100%;
    height: 100px;
  border: none;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="Homepage">
            <div class="selection" style="float: left;">
                <a href="#" onclick="show(SecondAttempt, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>2nd attempt to make a game</strong></h2></button>
                </a>
            </div>

            <div class="selection" style="float: right;">
                <a href="#" onclick="show(ScrollingTest, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>Scrolling Test</strong></h2></button>
                </a>
            </div>
        </div>
    </body>
</html>

Answer 1

要删除 space，请将 display: block; 添加到图像

至于动画，我不确定动画应该是什么，并且由于您没有任何 transition 对 tranform 的影响，rotateY(360deg) 只是旋转元素恢复到原始状态，没有任何视觉变化。

body {
  margin: 0%;
}

#Homepage {
  margin: 5%;
  font-family: sans-serif;
}

/* Note, added new DIV.inner container in HTML, without it, animation glitches when cursor is moving */
#Homepage .selection > .inner {       /* changed */
  width: 100%;                        /* changed */
  position: relative;
  display: flex;
  flex-direction: column;
  border: 5px solid;
  border-radius: 20px;
  overflow: hidden;
}
                                      /* added */
#Homepage .selection {
  width: 40%;
}


                                      /* added */
/* uncomment this if you want reverse animation when cursor moves away */
/*
#Homepage .selection > .inner {       
  transition: transform 1s;  
}
*/

#Homepage .selection:hover > .inner { /* changed */
  cursor: pointer;
  bottom: 100;                        /* wrong value */
  transition: transform 1s;           /* added */
  transform: rotateY(360deg);
}

#Homepage .selection img {
  box-sizing: border-box;
  width: 100%;
  display: block;                     /* added */
}

#Homepage .selection button {
  width: 100%;
    height: 100px;
  border: none;
}

@keyframes left {
  from {right: 10%;}
  to {right: 0;}
}

@keyframes right {
  from {left: 10%;}
  to {left: 0px;}
}

                                   /* added */
.selection.left
{
  float: left;
}

.selection.right
{
  float: right;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div id="Homepage">
            <div class="selection left">
              <div class="inner">
                <a href="#" onclick="show(SecondAttempt, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>2nd attempt to make a game</strong></h2></button>
                </a>
              </div>
            </div>

            <div class="selection right">
              <div class="inner">
                <a href="#" onclick="show(ScrollingTest, Homepage);">
                    <img src="https://via.placeholder.com/200x100.png?text=Lorem+Ipsum" alt="Preview of my second attempt to make a game">
                    
                    <button type="button"><h2><strong>Scrolling Test</strong></h2></button>
                </a>
              </div>
            </div>
        </div>
    </body>
</html>

为什么 img 和按钮之间有 space，为什么悬停动画不起作用？

Why is there space between the img and the button and why doesn't the hover animation work?

html

css

flexbox

css-animations