css - 如何阻止文本出现在旋转图像的后面？

标签 css animation

首先，这是 link看看我在说什么。不看就很难理解我在说什么。我在一个容器中有两个图像，如果您将鼠标悬停在容器上，前面的图像会旋转出去，而后面的图像会旋转进来。旋转很好，但是前面图像中的文本显示在图像的后面。我认为原因很简单，我在两个文本上都有 translateX。但是只有前面的图像文本显示在后面，而不是相反。有办法阻止这种情况发生吗？

代码

.container {
  margin: auto;
  width: 1200px;
  border-right: 1px solid grey;
  border-left: 1px solid grey;
  padding: 3em 0;
}

.img-container {
  display: block;
  max-width: 800px;
  width: 100%;
  margin: auto;
  position: relative;
  text-decoration: none;
}

.img-fluid {
  width: 100%;
  height: 100%;
}

.img {
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.7s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.text {
  color: white;
  transform-style: preserve-3d;
  transform: translateZ(60px);
  text-align: center;
  font-size: 36px;
  text-decoration: none;
  font-family: arial;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.inverse .text {
  transform: translateZ(60px);
}

.text h3 {
  text-decoration: none;
  align-self: center;
  text-transform: capitalize;
}

.text p {
  max-width: 66%;
  margin: 10px auto;
  text-align: center;
}

.inverse {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}


/* .visit{
      display:inline-block;
      text-align:center;
      background:white;
      color:blue;
      text-transform:capitalize;
      max-width:100px;
      padding:1em 2em;
      text-align:center;
      margin:0;
      border-style:none;
      border-radius: 25px;
    } */

.img.normal {
  transform: rotateY(0);
}

.img-container:hover .normal {
  transform: rotateY(180deg);
  background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}

.img-container:hover .inverse {
  transform: rotateY(0deg)
}
<div class="container">
  <a href="#" class="img-container">
    <div class="img-fluid img normal">
      <div class="text">
        <h3>Header</h3>
      </div>
    </div>
    <div class="img-fluid img inverse">
      <div class="text">
        <h3>Header</h3>
        <p>this is a summary something something something</p>
      </div>
    </div>
  </a>
</div>

最佳答案

您的答案在以下链接中。

Here is your working code

如果你不想删除 translateZ 那么只需添加 backface-visiblity: hidden;

喜欢

.text{
  color:white;
   transform-style:preserve-3d;
   transform: translateZ(60px);
  text-align:center;
  font-size:36px;
  text-decoration:none;
  font-family:arial;
  display:flex;
  justify-content:center;
  flex-direction:column;
  height:100%;
  backface-visibility:hidden; /* Added */
}

不删除 translateZ 的答案的工作片段。

.container {
  margin: auto;
  width: 1200px;
  border-right: 1px solid grey;
  border-left: 1px solid grey;
  padding: 3em 0;
}

.img-container {
  display: block;
  max-width: 800px;
  width: 100%;
  margin: auto;
  position: relative;
  text-decoration: none;
}

.img-fluid {
  width: 100%;
  height: 100%;
}

.img {
  height: 400px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.7s ease-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.text {
  color: white;
  transform-style: preserve-3d;
  transform: translateZ(60px);
  text-align: center;
  font-size: 36px;
  text-decoration: none;
  font-family: arial;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
  backface-visibility: hidden;
  /* Added */
}

.inverse .text {
  transform: translateZ(60px);
}

.text h3 {
  text-decoration: none;
  align-self: center;
  text-transform: capitalize;
}

.text p {
  max-width: 66%;
  margin: 10px auto;
  text-align: center;
}

.inverse {
  transform: rotateY(180deg);
  position: absolute;
  top: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}


/* .visit{
  display:inline-block;
  text-align:center;
  background:white;
  color:blue;
  text-transform:capitalize;
  max-width:100px;
  padding:1em 2em;
  text-align:center;
  margin:0;
  border-style:none;
  border-radius: 25px;
} */

.img.normal {
  transform: rotateY(0);
}

.img-container:hover .normal {
  transform: rotateY(180deg);
  background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}

.img-container:hover .inverse {
  transform: rotateY(0deg)
}
<div class="container">
  <a href="#" class="img-container">
    <div class="img-fluid img normal">
      <div class="text">
        <h3>Header</h3>
      </div>
    </div>
    <div class="img-fluid img inverse">
      <div class="text">
        <h3>Header</h3>
        <p>this is a summary something something something</p>
      </div>
    </div>
  </a>
</div>

第二个例子很容易搞定，跟着下面

.card-container {
  display: inline-block;
  margin: 0 auto;
  padding: 0 12px;
  perspective: 900px;
  text-align: center;
}

.card {
  position: relative;
  width: 100px;
  height: 100px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
}

.front,
.back {
  position: absolute;
  background: #FEC606;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  color: white;
  box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
  backface-visibility: hidden;
}

.front {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.back {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.card-container:hover .card {
  transform: rotateY(180deg);
}

.back {
  transform: rotateY(180deg);
}
<div class="card-container">
  <div class="card">
    <div class="front">Hello</div>
    <div class="back">User</div>
  </div>
</div>

关于css - 如何阻止文本出现在旋转图像的后面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45036822/

上一篇：javascript - 如何在纯 CSS 中做到这一点？

下一篇：更改命令名称后 css 不正确

相关文章：

ios - UIViewAnimationOption重复完成？

jquery - 制作叠加层以覆盖另一个元素的高度

javascript - 响应式导航菜单 : Toggle not working

html - 如果页面较短，则将 HTML 页脚保留在窗口底部

css - jquery-ui 按钮有时呈现缓慢，css 替代？

css - Ie11 不应用媒体查询样式

python - 如何模糊 3d matplotlib 中的点

javascript - Jquery动画进入页面

Android 在应用程序启动时设置动画

javascript - 如何选择多个div id

©2024 IT工具网  联系我们