如何将 CSS 过渡应用于容器 div 但不是内容

Question

我有一个div，其中有一个边框和一个链接。我希望 div 在悬停时旋转，但不是其中的链接。本质上，我希望看到边框以当前的方式旋转，但文本保持静止而不移动。

Here's a demo.

我发现this answer 有一个类似的问题，该问题建议我将链接文本向相反方向旋转，但由于文本仍在移动，这不起作用。或者，在悬停时，它会以另一种方式旋转，但如果你在 div 内并且没有将鼠标悬停在文本上，那么文本仍然会朝向错误的方向。

这是我的 CSS，应用于一个简单的 html 设置：

* {
  margin: 0;
  padding: 0;
}

body {
  background: #333;
  font-size: 62.5%;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  line-height: 1.6;
  text-align: center;
}

#button-container {
  display: inline-block;
  border: white 1px solid;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 3s 2s forwards;
  transition: transform 1s;
}

#button-container:hover {
  transform: rotateY(180deg);
}

#button-inner {
  display: block;
  color: white;
  text-decoration: none;
  transition: transform 1s;
  margin: 2rem;
  box-sizing: border-box;
}

#button-inner:hover {
  transform: rotateY(-180deg);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div id="button-container"><a href="/" id="button-inner">Read More</a></div>

Answer 1

这是一个肮脏的技巧，但如果您不想旋转另一侧的文本，则可以使用：

.link-background {
  background-color: green;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
}

.link-background:hover {
  transform: rotate(15deg);
}

.link-container {
  height: 40px;
  width: 70px;
  position: relative;
  z-index: 0;
}

a {
  text-decoration: none;
  color: white;
}

<div class="link-container">
  <div class="link-background"></div>
  <a class="the-link" href="#">Link to #</a>
</div>

虽然此解决方案不是您正在寻找的确切解决方案，但我希望您明白使用 position 和 z-index 的目的

Answer 2

div 和链接应该是同级的。和div 应该定位absolute 并填充父容器。然后旋转div 不会影响链接。我已经分叉并编辑了您的代码框。看看：codesandbox

Answer 3

使用pseudo-element 的问题的最佳解决方案。不需要添加额外的DOM 元素，它对性能更好。我在 css sn -p 中记录了添加或更改的内容。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: serif;
}
body {
  background: #333;
  font-size: 62.5%;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  line-height: 1.6;
  text-align: center;
  padding: 20px; /* added */
}

.container {
  max-width: 50rem;
  margin: auto;
  padding: 0 2rem;
}

#showcase {
  height: max-content; /* changed */
}

#showcase h1 {
  font-size: 3rem;
  line-height: 1.3;
  position: relative;
  animation: slideDown 2s forwards;
}

@keyframes slideDown {
  0% {
    top: -5rem;
  }
  100% {
    top: 0rem; /* changed */
  }
}

#content {
  position: relative;
  animation: slideRight 2s forwards;
}

@keyframes slideRight {
  0% {
    left: -100vw;
  }
  100% {
    left: 0;
  }
}

#button-container {
  display: inline-block;
  /* border: white 1px solid; */
  margin-top: 1rem;
  /* opacity: 0; */
  /* animation: fadeIn 3s 2s forwards; */
  /* transition: transform 1s; */
  position: relative; /* added */
  perspective: 500px; /* added */
  transform-style: preserve-3d; /* added */
}
/* pseudo-class added */
#button-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: white 2px solid;
  transition: all 1s ease-in-out;
  pointer-events: none;
  z-index: -1;
}
/* hover changed */
#button-container:hover::before {
  transform: rotateY(180deg);
}

#button-inner {
  display: block;
  color: white;
  text-decoration: none;
  /* transition: transform 1s; */
  margin: 2rem;
  box-sizing: border-box;
}

/* #button-inner:hover {
  transform: rotateY(-180deg);
} */

/* @keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */

<header id="showcase">
  <h1>Welcome to my site</h1>
</header>
<div id="content" class="container">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde accusamus at architecto dolorem! Numquam fuga deserunt nostrum tempora nobis magni sunt voluptatum minus, neque suscipit? Corporis quos sit quo autem magnam inventore consequatur tempora ducimus
  doloribus repellat quisquam labore aliquam, libero ut iusto! Placeat, porro accusantium nam tempore aperiam minus.
</div>
<div id="button-container"><a href="/" id="button-inner">Read More</a></div>

Answer 4

如果您只想旋转边框，请将其放在一个 before 伪元素上并在悬停时旋转它。这将保持实际元素的内容不旋转。

* {
  margin: 0;
  padding: 0;
}

body {
  background: #333;
  font-size: 62.5%;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
  line-height: 1.6;
  text-align: center;
}

.container {
  max-width: 50rem;
  margin: auto;
  padding: 0 2rem;
}

#showcase {
  height: 20rem;
}

#showcase h1 {
  font-size: 3rem;
  line-height: 1.3;
  position: relative;
  animation: slideDown 2s forwards;
}

@keyframes slideDown {
  0% {
    top: -5rem;
  }
  100% {
    top: 5rem;
  }
}

#content {
  position: relative;
  animation: slideRight 2s forwards;
}

@keyframes slideRight {
  0% {
    left: -100vw;
  }
  100% {
    left: 0;
  }
}

#button-container {
  display: inline-block;
  margin-top: 1rem;
  opacity: 0;
  animation: fadeIn 3s 2s forwards;
  display: relative;
  width: auto;
  height: auto;
  position: relative;
}

#button-container::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: white 1px solid;
  transition: transform 1s;
  transform: rotateY(0);
  rz-index: 1;
}

#button-container:hover::before {
  transform: rotateY(180deg);
}

#button-inner {
  display: block;
  color: white;
  text-decoration: none;
  transition: transform 1s;
  margin: 2rem;
  box-sizing: border-box;
}

#button-inner:hover {
  transform: rotateY(-180deg);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<body>
  <header id="showcase">
    <h1>Welcome to my site</h1>
  </header>
  <div id="content" class="container">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde accusamus at architecto dolorem! Numquam fuga deserunt nostrum tempora nobis magni sunt voluptatum minus, neque suscipit? Corporis quos sit quo autem magnam inventore consequatur tempora ducimus
    doloribus repellat quisquam labore aliquam, libero ut iusto! Placeat, porro accusantium nam tempore aperiam minus.
  </div>
  <div id="button-container"><a href="/" id="button-inner">Read More</a></div>