如何阻止文本显示在旋转图像的背面？

时间：2017-07-11 14:05:08

标签： css animation

首先，这是link，看看我在说什么。如果没有看到它，将会有点难以理解我的意思。如果将鼠标悬停在容器上，前图像旋转并且后方图像旋转，我在一个容器中有两个图像。旋转很好，但正面图像中的文本显示在图像的背面。我认为原因很简单，我在两篇文章中都有翻译。但只有前面的图像文字显示在后面，而不是相反。有没有办法阻止这种情况发生？

代码

.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>

2 个答案:

答案 0 :(得分：2)

您的回答是以下链接。

<强> 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。

＆＃13;
＆＃13; 
.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)
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

通过以下方式轻松获得它的第二个例子。

＆＃13;
＆＃13; 
.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);
}
＆＃13; 
<div class="card-container">
  <div class="card">
    <div class="front">Hello</div>
    <div class="back">User</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

将班级app-store更改为下方，文字不会随图片一起旋转：

.text

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

.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), opacity:0;
  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)
}

相关问题
最新问题