如何将 CSS 转换应用到容器 div 而不是内容

Question

我有一个带边框的 div，里面有一个 link。我希望 div 在悬停时旋转，而不是其中的 link。本质上，我希望看到边框按照当前的方式旋转，但文本保持静止不动。

我发现 this answer 到一个类似的问题，该问题建议我将 link 文本旋转到相反的方向，但这不起作用，因为文本仍在移动。或者，在悬停时，它会以另一种方式旋转，但如果您在 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

这是一个肮脏的 hack，但如果您不想旋转对面的文本，也可以使用：

.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和link应该是兄妹。并且 div 应该定位 absolute 并填充父容器。然后旋转 div 不会影响 link。我已经分叉并编辑了你的codesandbox。检查一下：codesandbox

Answer 3

您的问题的最佳解决方案使用 pseudo-element。不需要添加额外的 DOM 元素，而且性能更好。我在 css 片段中注明了添加或更改的内容。

* {
  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>

如何将 CSS 转换应用到容器 div 而不是内容

How to apply CSS transition to container div but not contents

css

css-animations

css-transitions