CSS переворачивание карты не работает на устройствах Apple - PullRequest
Новая
       0

CSS переворачивание карты не работает на устройствах Apple

0 голосов
/ 20 февраля 2020

У меня есть веб-сайт, где пользователи могут делать карты sh и использовать их. Iv'e проверил карты на всех устройствах, и веб-браузеры и устройства Apple, кажется, доставляют мне проблемы. Анимация работает и позволяет карте перевернуться, но содержимое на обратной стороне карты исчезает. Я не буду включать его, потому что он длинный, но у меня также есть функция JS, которая добавляет «перевернутый» класс «gallery-cell». Вы увидите это в моем CSS. 

    .gallery-cell.card {
      position: relative;
  
     -webkit-transition: 0.5s;
     -moz-transition: 0.6s;
     transition: transform .5s;
  
     -webkit-perspective: 1000;
     -moz-perspective: 1000;
     -o-perspective:1000;
     -ms-perspective: 1000;
     perspective: 1000;
  
     -ms-transform: perspective(1000px);
     -moz-transform: perspective(1000px);
     -moz-transform-style: preserve-3d; 
     -ms-transform-style: preserve-3d;
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;
     word-break: break-word;
    }

    .card__face {
      position: absolute;
      height: 100%;
      width: 100%;
      padding: 25px;
  
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
  
      display: flex;
      justify-content: center;
      text-align: center;
      cursor: pointer;
    }

    .card__face--back {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
      transform: rotateY( 180deg );
    }

    .card__face--front {
        -moz-transform-style: preserve-3d; 
        -ms-transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    
        -webkit-perspective: inherit;
        -moz-perspective: inherit;
        -o-perspective: inherit;
        -ms-perspective: inherit;
        perspective: inherit;
    
        z-index: 2;
        background-color: #fff;
    }

    .flipped {
      -webkit-transform: rotateY(180deg);
      -moz-transform: rotateY(180deg);
      -o-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
       transform: rotateY(180deg);
    }

    .card_contents {
        overflow-y: auto;
        margin: 0;
        display: flex;
    }
<div class='gallery-cell card flippable'>
	    <div class='card__face card__face--front'>
			<div class='card_contents'>
				<h3>
					$question
				</h3>
			</div>
	    </div>
	    <div class='card__face card__face--back'>
			<div class='card_contents'>
				<h3>
					$answer
				</h3>
			</div>
	    </div>
    </div>

1 Ответ

1 голос
/ 20 февраля 2020

Причиной, по которой я переработал CSS и HTML, является b / c после добавления вашего кода в JSFiddle, он сразу же не отображался правильно.

Первая проблема заключается в том, что вы нужен другой элемент-обертка для хранения контейнеров (card__face). Также perspective не может быть унаследовано. К сожалению, анимация не будет работать, если только height не был предоставлен для основного элемента оболочки. min-height тоже не сработало.

Вы можете запустить JS и определить высоту под нагрузкой. (см. Флипчарт CSS3 с Automati c Высота ) 

<div class="gallery-cell card flippable">
  <div class="wrapper">
    <div class='card__face card__face--front'>
      <div class='card_contents'>
        <h3>
          $question
        </h3>
      </div>
    </div>
    <div class='card__face card__face--back'>
      <div class='card_contents'>
        <h3>
          $answer
        </h3>
      </div>
    </div>
  </div>

</div>

.gallery-cell {
  background-color: transparent;
  width: 100%;
  height: 100px;
  perspective: 1000px;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.gallery-cell:hover .wrapper,
.gallery-cell.flipped .wrapper {
  transform: rotateY(180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card__face--front {
  background-color: red;
}

.card__face--back {
  background-color: #000;
  color: white;
  transform: rotateY(180deg);
}

.card_contents {
    overflow-y: auto;
    margin: 0;
    display: flex;
}

Я добавил hover на случай, если вы хотите его протестировать - вот https://jsfiddle.net/rzqkpva9/

...