卡片翻转CSS转换在iPad上无法正常工作

时间：2014-01-07 04:36:35

标签： html css ipad 3d transformation

我正在制作纸牌游戏。当玩家发牌时，我希望翻牌。动画在笔记本电脑上以chrome工作，但它在iPad上有一些图形问题。知道发生了什么吗？

Fiddle

我希望我能截取屏幕截图，但这并没有突显问题。

HTML：

<body>
  <div class="container">
    <div class="row">

      <div class="playing-cards">
        <div class="hand">
          <!-- Ace -->
          <div class="card flipped rank-a spades">
            <div class="front">
              <div class="rank">A</div>
              <div class="suit">&spades;</div>
              <div class="icon">&spades;</div>
            </div>
            <div class="back"></div>
          </div>
          <!-- King -->
          <div class="card flipped rank-k spades">
            <div class="front">
              <div class="rank">K</div>
              <div class="suit">&spades;</div>
              <div class="icon">&#9818;</div>
            </div>
            <div class="back"></div>
          </div>
          <!-- Queen -->
          <div class="card flipped rank-q spades">
            <div class="front">
              <div class="rank">Q</div>
              <div class="suit">&spades;</div>
              <div class="icon">&#9819;</div>
            </div>
            <div class="back"></div>
          </div>
          <!-- Jack -->
          <div class="card flipped rank-j spades">
            <div class="front">
              <div class="rank">J</div>
              <div class="suit">&spades;</div>
              <div class="icon">&#9823;</div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 10 -->
          <div class="card flipped rank-10 spades">
            <div class="front">
              <div class="rank">10</div>
              <div class="suit"></div>
              <div class="icon">
                &spades;&spades;&spades;<br>&spades;&spades;&spades;&spades;<br>&spades;&spades;&spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 9 -->
          <div class="card flipped rank-9 spades">
            <div class="front">
              <div class="rank">9</div>
              <div class="suit"></div>
              <div class="icon">
                &spades;&spades;&spades;<br>&spades;&spades;&spades;<br>&spades;&spades;&spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 8 -->
          <div class="card flipped rank-8 spades">
            <div class="front">
              <div class="rank">8</div>
              <div class="suit"></div>
              <div class="icon">
                &spades;&spades;&spades;<br>&spades; &spades;<br>&spades;&spades;&spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 7 -->
          <div class="card flipped rank-7 spades">
            <div class="front">
              <div class="rank">7</div>
              <div class="suit"></div>
              <div class="icon">
                &spades; &spades;<br>&spades;&spades;&spades;<br>&spades; &spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 6 -->
          <div class="card flipped rank-6 spades">
            <div class="front">
              <div class="rank">6</div>
              <div class="suit"></div>
              <div class="icon">
                &spades; &spades;<br>&spades; &spades;<br>&spades; &spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 5 -->
          <div class="card flipped rank-5 spades">
            <div class="front">
              <div class="rank">5</div>
              <div class="suit"></div>
              <div class="icon">
                &spades; &spades;<br>&spades;<br>&spades; &spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 4 -->
          <div class="card flipped rank-4 spades">
            <div class="front">
              <div class="rank">4</div>
              <div class="suit"></div>
              <div class="icon">
                &spades; &spades;<br><br>&spades; &spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 3 -->
          <div class="card flipped rank-3 spades">
            <div class="front">
              <div class="rank">3</div>
              <div class="suit"></div>
              <div class="icon">
                &spades;<br>&spades;<br>&spades;
              </div>
            </div>
            <div class="back"></div>
          </div>
          <!-- 2 -->
          <div class="card flipped rank-2 spades">
            <div class="front">
              <div class="rank">2</div>
              <div class="suit"></div>
              <div class="icon">
                &spades;<br><br>&spades;
              </div>
            </div>
            <div class="back"></div>
          </div>

        </div>
      </div>
    </div>
  </div>
</body>

CSS：

.playing-cards {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
/**
 * Hands are the players hand
 */
 .playing-cards .hand {
    cursor: pointer;
    text-align: center;
}
.playing-cards .hand .card {
    margin-right: -.5em;
    margin-left: -.5em;
}
/**
 * Tables are the traded cards
 */
 .playing-cards .table {
    font-size: 1.1em;
    cursor: default;
    text-align: center;
}
.playing-cards .table .card {
    margin-right: 1em;
    margin-left: 1em;
}
/*
 * Played are the middle cards
 */
 .playing-cards .played {
    font-size: 1.1em;
    cursor: default;
    width: 265px;
    height: 265px;
    position: absolute;
    left: 50%;
    margin-left: -132.5px;
}
.playing-cards .played .card:nth-of-type(1) {
    position: absolute;
    top: 1.65em;
    left: 0.65em;
    transform: rotate(270deg) translate3d(0, 0, 0);
    -moz-transform: rotate(270deg) translate3d(0, 0, 0);
    ;
    -webkit-transform: rotate(270deg) translate3d(0, 0, 0);
    ;
}
.playing-cards .played .card:nth-of-type(2) {
    position: absolute;
    left: 2.65em;
}
.playing-cards .played .card:nth-of-type(3) {
    position: absolute;
    left: 2.65em;
    top: 3.65em;
    transform: rotate(180deg) translate3d(0, 0, 0);
    -moz-transform: rotate(180deg) translate3d(0, 0, 0);
    -webkit-transform: rotate(180deg) translate3d(0, 0, 0);
}
.playing-cards .played .card:nth-of-type(4) {
    position: absolute;
    left: 4.65em;
    top: 1.65em;
    transform: rotate(90deg) translate3d(0, 0, 0);
    -moz-transform: rotate(90deg) translate3d(0, 0, 0);
    -webkit-transform: rotate(90deg) translate3d(0, 0, 0);
}
/**
 * Card shape and animations
 */
 .playing-cards .card {
    font-size: 2em;
    display: inline-block;
    width: 3.3em;
    height: 4.6em;
    position: relative;
    font-family: monospace;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 0.1s;
    -moz-transition: -moz-transform 0.1s;
    transition: transform 0.1s;
}
.playing-cards .card .front, .playing-cards .card .back {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: .25em;
    background: #FFF;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
    -webkit-box-shadow: .1em .1em .3em #444;
    -moz-box-shadow: .1em .1em .3em #444;
    box-shadow: .1em .1em .3em #444;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}
.playing-cards .card.flipped {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.playing-cards .card .front {
    background-color: #fff;
    -webkit-transform: translateZ(1px);
    -moz-transform: translateZ(1px);
    transform: translateZ(1px);
}
.playing-cards .card .back {
    background: -webkit-radial-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), red;
    background-size: 48px;
    -webkit-box-shadow: inset 0 0 0px .2em #FFF, .1em .1em .3em #444;
    -moz-box-shadow: inset 0 0 0px .2em #FFF, .1em .1em .3em #444;
    -box-shadow: inset 0 0 0px .2em #FFF, .1em .1em .3em #444;
    -webkit-transform: rotateY(-180deg) translateZ(1px);
    -moz-transform: rotateY(-180deg) translateZ(1px);
    transform: rotateY(-180deg) translateZ(1px);
}
/**
 * Card look
 */
 .playing-cards .card .front .rank {
    height: 25%;
    text-align: left;
    position: relative;
    top: -.3em;
}
.playing-cards .card .front .suit {
    text-align: left;
    font-size: .7em;
    height: 25%;
    position: relative;
    top: -.3em;
}
.playing-cards .card .front .icon {
    text-align: center;
    font-size: 2.9em;
    height: 50%;
    position: relative;
    top: -.45em;
}
.playing-cards .card.hearts, .playing-cards .card.diams {
    color: #DD0000;
}
.playing-cards .card.clubs, .playing-cards .card.spades {
    color: #333;
}
/**
* Small fixes
*/
 .playing-cards .card.hearts.rank-a .front .icon {
    margin-top: .1em;
    font-size: 2.7em;
}
/**
* Card icons
*/
 .playing-cards .card.rank-10 .suit, .playing-cards .card.rank-9 .suit, .playing-cards .card.rank-8 .suit, .playing-cards .card.rank-7 .suit, .playing-cards .card.rank-6 .suit, .playing-cards .card.rank-5 .suit, .playing-cards .card.rank-4 .suit, .playing-cards .card.rank-3 .suit, .playing-cards .card.rank-2 .suit {
    height: 0px;
}
/*High Packing*/
 .playing-cards .card.rank-10 .icon {
    margin-top: 10%;
    height: 75%;
    font-size: .75em;
    letter-spacing: -.1em;
    word-spacing: -.2em;
}
/*Medium Packing*/
 .playing-cards .card.rank-9 .icon, .playing-cards .card.rank-8 .icon, .playing-cards .card.rank-7 .icon {
    margin-top: 10%;
    height: 75%;
    font-size: .75em;
    letter-spacing: .1em;
    word-spacing: -.2em;
}
/*Low Packing*/
 .playing-cards .card.rank-6 .icon, .playing-cards .card.rank-5 .icon, .playing-cards .card.rank-4 .icon, .playing-cards .card.rank-3 .icon, .playing-cards .card.rank-2 .icon {
    margin-top: 10%;
    height: 75%;
    font-size: .75em;
    letter-spacing: 0em;
    word-spacing: .25em;
}

JS（jquery和下划线）：

  $(document).ready(function () {
      _.each($(".playing-cards .hand .card"), function (card, i) {
          _.delay(function () {
              $(card).toggleClass("flipped");
          }, i * 100);
      });

      $(".playing-cards .hand .card").click(function () {
          $(this).toggleClass("flipped");
      });
  });

0 个答案:

没有答案
相关问题
最新问题