CSS трансформация появляется в мобильном браузере наоборот

Question

Приведенный ниже код правильно отображает содержимое внутри кружков в веб-браузере.В мобильном браузере контент отображается в обратном порядке (iphone safari, chrome)

Есть идеи, как это исправить?

https://codepen.io/girish979/pen/gQQzMQ

/**************
 * Basics for this pen from
 * https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
 * added support for bootstrap grids. extracted border-radius to use effect on rectangles as well
 */

/*
 * separate class for round elements
 */
.do-circle {
  border-radius: 50%;
}

.do-item {
  width: 100%;
  height: auto;
  position: relative;
}

.do-item-circle {
  max-width: 261px;
}

.do-item-square {
  max-width: 350px;
}

.do-info-wrap {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  transition: all 0.4s ease-in-out;
  perspective: 800px;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 115, 0.2);
}

.do-info {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
}

.do-info > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.do-info .do-info-back {
  transform: rotate3d(0, 1, 0, 180deg);
  -webkit-transform:rotate3d(0, 1, 0, 180deg);
  background: #000;
}

.do-info h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0 15px;
  padding: 40px 0 0 0;
  height: 90px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.do-info-back {
  text-align: center;
}

.do-info-back > div {
  color: #fff;
  padding: 10px 5px;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid #fff;
}

.do-item:hover .do-info-wrap {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.8);
}

.do-item:hover .do-info {
  transform: rotate3d(0, 1, 0, -180deg);
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

  <div class="row">
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="col-sm-4">
    <div class="do-item">
      <img src="http://placehold.it/350x250" class="do-item">
      <div class="do-info-wrap">
        <div class="do-info">
          <div class="do-info-front"></div>
          <div class="do-info-back">
            <h3>Max Mustermann (43)</h3>
            <div>Mönchaltdorf
              <br /> Beruf / Funktion</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
  </div>

Answer 1

Добавление значения opacity:0 для классов .do-info-wrap и .do-info и изменение при наведении курсора * opacity:1 может решить проблему.

/**************
 * Basics for this pen from
 * https://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/
 * added support for bootstrap grids. extracted border-radius to use effect on rectangles as well
 */

/*
 * separate class for round elements
 */
.do-circle {
  border-radius: 50%;
}

.do-item {
  width: 100%;
  height: auto;
  position: relative;
}

.do-item-circle {
  max-width: 261px;
}

.do-item-square {
  max-width: 350px;
}

.do-info-wrap {
  position: absolute;
  top: 20px;
  left: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  transition: all 0.4s ease-in-out;
  perspective: 800px;
  box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 3px rgba(115, 114, 115, 0.2);
  opacity:0;
}

.do-info {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
opactiy:0;
}

.do-info > div {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.do-info .do-info-back {
  display: inline-block;
  transform: rotate3d(0, 1, 0, 180deg);
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
			-ms-transform: rotate3d(0, 1, 0, -180deg);
			-moz-transform: rotate3d(0, 1, 0, -180deg);
			-o-transform: rotate3d(0, 1, 0, -180deg);
  background: #000;

}

.do-info h3 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0 15px;
  padding: 40px 0 0 0;
  height: 90px;
  font-family: 'Open Sans', Arial, sans-serif;
  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
}

.do-info-back {
  text-align: center;
}

.do-info-back > div {
  color: #fff;
  padding: 10px 5px;
  margin: 0 30px;
  font-size: 12px;
  border-top: 1px solid #fff;
}

.do-item:hover .do-info-wrap {
    opacity:1;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(255, 255, 255, 0.8);
}

.do-item:hover .do-info {
  opacity:1;
  display: block;
  transform: rotate3d(0, 1, 0, -180deg);
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
			-ms-transform: rotate3d(0, 1, 0, -180deg);
			-moz-transform: rotate3d(0, 1, 0, -180deg);
			-o-transform: rotate3d(0, 1, 0, -180deg);
}

<div class="container">

  <div class="row">
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="do-item do-item-circle do-circle">
        <img src="http://placehold.it/261x261" class="do-item do-circle">
        <div class="do-info-wrap do-circle">
          <div class="do-info">
            <div class="do-info-front do-circle"></div>
            <div class="do-info-back do-circle">
              <h3>Max Mustermann (43)</h3>
              <div>Mönchaltdorf
                <br /> Beruf / Funktion</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="col-sm-4">
    <div class="do-item">
      <img src="http://placehold.it/350x250" class="do-item">
      <div class="do-info-wrap">
        <div class="do-info">
          <div class="do-info-front"></div>
          <div class="do-info-back">
            <h3>Max Mustermann (43)</h3>
            <div>Mönchaltdorf
              <br /> Beruf / Funktion</div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
    </div>
    <div class="col-sm-4">
    </div>
  </div>

Обратите внимание, что :hover может работать не так, как ожидалось, на мобильных (сенсорных) устройствах по сравнению с веб-браузером.Может быть, вы можете дать лучший опыт только для мобильных устройств.