Question

我正在尝试翻转这个2面立方体，所以它看起来总是在向上旋转。

这是我到目前为止所拥有的

每次单击按钮时，我将度数增加90度。但在270度时，立方体向下旋转。 1）我怎样才能使每个点击立方体不断旋转？ 2）如何在第二次点击后防止文本翻转？（我希望文本总是看起来像前两次点击一样）

/* Container box to set the sides relative to */
    .cube {
        width: 30%;
        text-align: center;
        margin: 0 auto;
        height: 100px;

        -webkit-transition: -webkit-transform .33s;
        transition: transform .33s; /* Animate the transform properties */

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d; /* <-NB */
    }

    /* The two faces of the cube */
    .flippety,.flop {
        background: rgb(247, 247, 247);
        border: 1px solid rgba(147, 184, 189, .8);

        -webkit-border-radius: 5px;
        border-radius: 5px;

        -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
        box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
        height: 100px;
    }

    /* Position the faces */
    .flippety {
        -webkit-transform: translateZ(50px);
        transform: translateZ(50px);
    }

    .flop {
        -webkit-transform: rotateX(-90deg) translateZ(-50px);
        transform: rotateX(-90deg) translateZ(-50px);
    }

    /* Rotate the cube */
    .cube:hover {
        -webkit-transform: rotateX(89deg);
        transform: rotateX(89deg); /* Text bleed at 90º */
    }
    .cuberotate {
            width: 30%;
        text-align: center;
        margin: 0 auto;
        height: 100px;

        -webkit-transition: -webkit-transform .33s;
        transition: transform .33s; /* Animate the transform properties */

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg); /* Text bleed at 90º */
    }


    .cuberotateit {
            width: 30%;
        text-align: center;
        margin: 0 auto;
        height: 100px;

        -webkit-transition: -webkit-transform .33s;
        transition: transform .33s; /* Animate the transform properties */

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-transform: rotateX(89deg);
        transform: rotateX(89deg); /* Text bleed at 90º */
    }



     var degrees=0;

    $("#btnflipflop").on('click', function (e) {

                    $("#questioncube").attr('class', "cuberotateit");


                    degrees = degrees + 90;


                    $('.cuberotateit').css('-webkit-transform', 'rotateX(' + degrees + 'deg)');
                    $('.cuberotateit').css('transform', 'rotateX(' + degrees + 'deg)');




                });

     <div id="questioncube" class="cube">
            <div id="card1" class="flippety">
                <h1>Flippity</h1>
            </div>
            <div id="card2" class="flop">
                <h2>Flop</h2>
            </div>
        </div>

Answer 1

工作正常。你只有四个面中的两个，所以你看到的是第三次和第四次迭代的两个面的背面。请参阅添加了backface-visibility: hidden;的{{3}}。

更新

您需要在每张脸上的position: relative;和.cube上设置position: absolute; width: 100%; height: 100%;。如果您停用每个面上的transform和-webkit-transform，您会看到默认position: static;如何影响其布局。

以下是更新（和清理）代码的演示：

var degrees = 0;

$("#btnflipflop").on('click', function(e) {
  degrees += 90;

  $('#questioncube').css('-webkit-transform', 'rotateX(' + degrees + 'deg)');
  $('#questioncube').css('transform', 'rotateX(' + degrees + 'deg)');
});

/* Container box to set the sides relative to */
.cube {
  width: 30%;
  text-align: center;
  margin: 0 auto;
  height: 100px;
  -webkit-transition: -webkit-transform .33s;
  transition: transform .33s;
  /* Animate the transform properties */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  /* <-NB */
  position: relative;
}
.face1,
.face2,
.face3,
.face4 {
  background: rgb(247, 247, 247);
  border: 1px solid rgba(147, 184, 189, .8);
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
  box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
  height: 100px;
  position: absolute;
  width: 100%;
  height: 100%;
}
.face1 {
  -webkit-transform: translateZ(50px);
  transform: translateZ(50px);
}
.face2 {
  -webkit-transform: rotateX(-90deg) translateZ(50px);
  transform: rotateX(-90deg) translateZ(50px);
}
.face3 {
  -webkit-transform: rotateX(-180deg) translateZ(50px);
  transform: rotateX(-180deg) translateZ(50px);
}
.face4 {
  -webkit-transform: rotateX(-270deg) translateZ(50px);
  transform: rotateX(-270deg) translateZ(50px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="questioncube" class="cube">
  <div id="card1" class="face1">
    <h1>face1</h1>
  </div>
  <div id="card2" class="face2">
    <h2>face2</h2>
  </div>
  <div id="card3" class="face3">
    <h1>face3</h1>
  </div>
  <div id="card4" class="face4">
    <h2>face4</h2>
  </div>
</div>

<input id="btnflipflop" type="button" value="flipme" />

css变换2面向立方体总是向上旋转

1 个答案:

更新