如何阻止翻转效果将其他元素推离它？

Posted 2023-03-28

【中文标题】如何阻止翻转效果将其他元素推离它？

【英文标题】：How can I stop a flip effect from pushing other elements away from it?

【发布时间】：2022-01-09 02:24:12

【问题描述】：

在过去的两天里，我断断续续地对此表示不满。本质上，我的页面底部有一张“联系我”卡片，当点击显示消息时它会翻转。问题是，无论我把它放在多大的空间里，当它翻转时它总是把其他元素推开。这会导致页脚被推下屏幕，我认为这看起来不太好！

我尝试在按钮、页脚和按钮上方的段落中添加和删除边距，但似乎没有任何效果。我得到的最接近的是将页脚粘贴到页面底部，但是从加载后它就在那里，这显然也不起作用。非常感谢任何帮助！

        <div class="titles faded">
      <h2>My skills</h2>
      <p class = "skills-text">My strongest points are html and CSS, followed by javascript. I've also got experience making React apps, creating and maintaining SQL and MongoDB databases, using API's and more. My aim is to become a solid full stack developer, I find
        both front and back end to be equally challenging, interesting and satisfying to work with.
      </p>
    </div>

    <div class="btn faded">
      <div class="btn-back">
        <p>If you'd like to get in touch about hiring me for a full time job or just a small project, please get in touch by my email.</a> I look forward to hearing from you!</p>
      </div>
      <div class="btn-front">Contact me?</div>
    </div>
  </div>

      <div class="footer">
        <footer>
          <p>All content copyright Donald Barr 2021</p>
        </footer>
      </div>

CSS

.btn 
  display: block;
  position: relative;
  width: 200px;
  height: 80px;
  margin:auto;
  transition: width 0.8s cubic-bezier(0.23, 1, 0.32, 1), height 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  text-align: center;


.btn-front 
  position: absolute;
  border-radius: 7px;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 80px;
  background-color: #1f2839;
  color: #ACBCE8;
  cursor: pointer;
  backface-visibility: hidden;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.25rem;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: background 0.5s ease, line-height 0.2s cubic-bezier(0.23, 1, 0.32, 1);


.btn-front:hover 
  background-color: #8BA3D6;


.btn-back 
  position: absolute;
  border-radius: 7px;
  width: 100%;
  height: 100%;
  margin-bottom: -500px;
  background-color: #8BA3D6;
  color: #1f2839;
  transform: translateZ(-2px) rotateX(180deg);
  overflow: hidden;
  transition: box-shadow 0.8s ease;

这里可以看到footer被推开的效果

【问题讨论】：

将卡片定位到固定位置而不是绝对位置。

这会阻止它把东西推开，但当我在页面的其余部分时，它会浮在屏幕底部。有没有办法让它远离文档的底部而不是窗口的底部？谢谢

【参考方案1】：

如果这对将来的任何人有用，我似乎已经自己解决了：

将按钮元素的位置保持为绝对位置，但添加了：

left:0;
right:0;

到整个 .btn 元素。不知道这是如何解决的，但似乎可以。希望这对某人有用！