翻转网格标题的问题以及触摸设备时的操作

Question

我创建了一个可以翻转的网格，每边都有一张不同的图片，带有标题。在触摸设备上查看此内容时，如何克服我将面临的问题？

此外，当翻转正方形时，我无法让文字不反转。如果有人也可以提供帮助，那就太好了。

提前感谢您的帮助！

.grid{
  width:calc(95vw + 10px);
  display:inline-block;
  position:relative;
  background-color:transparent;
  perspective:1000px;
  padding-left: 35px;
  padding-top: 10px;
    
}
.griditem{
  display:block;
  width:15vw;
  margin:5px;
  height:15vw;
  float:left;
}
.front{
  width:100%;
  height:100%;
  background: url('https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg') no-repeat;
  background-attachment:fixed;
  background-position: center;
  background-size:cover;
  transform:rotateY(0deg);
  transition:.4s ease-in-out;
  cursor:pointer;
}
.back{
  width:100%;
  height:100%;
  transform:rotateY(180deg);
  background:#fff url('http://www.dentoncorkermarshall.com/wp-content/uploads/2013/12/Asia-Square-06.jpg?x92178') no-repeat;
  background-size:cover;
  backface-visibility:hidden;
  transition:.4s ease-in-out;
  position:absolute;
  top:0;
  z-index:2;
  font-family: montserrat;
}
.griditem:hover .front{
  transform:rotateY(180deg);
  transition:.4s ease-in-out;
}
.griditem:hover .back{
  transform:rotateY(0deg);
  transition:.4s ease-in-out;
}

      <div class="grid">
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back">olleh</div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
  <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
    <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
    <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
    <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
    <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
    <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
    <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
    <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
        <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
       <div class="griditem">
    <div class="front">
      <div class="back"></div>
    </div>
  </div>
</div>

Answer 1

尝试使用 jQuery 完成此操作。这在桌面上的工作方式相同，但应该允许用户 tap/click 在 mobile/tablet 设备上旋转图像。

if (matchMedia) { // media query event handler
  var mq = window.matchMedia("(max-width: 768px)"); // whatever your definition of mobile/tablet is
  mq.addListener(WidthChange);
  WidthChange(mq);
}

function WidthChange(mq) { // media query change

  var $gridItem = $('.griditem');

  if (mq.matches) { // if screen is bigger than 768px (iPad)
    $gridItem.mouseenter(function() { // user hovers on gridItem
      $(this).addClass('is-flipped'); // add mod class
    });
    $gridItem.mouseleave(function() { // user stops hovering
      $(this).removeClass('is-flipped'); // remove mod class
    });
  } else { // device bigger than iPad
    $gridItem.click(function() { // user clicks/taps gridItem
      $(this).toggleClass('is-flipped'); // toggle mod class
    });
  }
}

* {
  font-family: sans-serif;
}

.grid {
  width: calc(95vw + 10px);
  display: inline-block;
  position: relative;
  background-color: transparent;
  perspective: 1000px;
  padding-left: 35px;
  padding-top: 10px;
}

.grid h1 {
  position: absolute;
  top: 5%;
  left: 5%;
  color: white;
  z-index: 2;
  font-size: 4.2em;
  pointer-events: none;
}

.griditem {
  display: block;
  width: 15vw;
  margin: 5px;
  height: 15vw;
  float: left;
  position: relative;
}

.front,
.back {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.4s ease-in-out;
}

.front {
  z-index: 1;
  background: url('https://static.pexels.com/photos/279315/pexels-photo-279315.jpeg') no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  cursor: pointer;
}

.back {
  transform: rotateY(-180deg);
  /* Negative value to make it spin the right way */
  background: #fff url('http://www.dentoncorkermarshall.com/wp-content/uploads/2013/12/Asia-Square-06.jpg?x92178') no-repeat;
  background-size: cover;
  backface-visibility: hidden;
  transition: .4s ease-in-out;
  z-index: 0;
  /* position behind .front */
  font-family: montserrat;
  text-align: center;
}

.griditem.is-flipped .front {
  transform: rotateY(180deg);
}

.griditem.is-flipped .back {
  transform: rotateY(0deg);
  z-index: 2;
  /* Position in front of .front */
}

.back span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="grid">
<h1>Title goes here</h1>
  <div class="griditem">
    <div class="front">
    </div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
  <div class="griditem">
    <div class="front"></div>
    <div class="back">
      <span>Hello</span>
    </div>
  </div>
</div>

.back 显示翻转文本的原因是因为它是 .front 的子项而不是 .griditem 的子项。因此，当我们将 .front 翻转 180 度左右时，.back 将再次翻转。

翻转网格标题的问题以及触摸设备时的操作

Issues with flipping grid titles and what to do when it comes to touch devices

html

css

grid

touch