Question

我想在此blog post中使用卡片翻转效果来处理我正在进行的项目。但是，我不能使用固定值作为卡的宽度和高度，因为我需要考虑不同的屏幕尺寸。

以下是帖子中的代码：

.flip-container {
    perspective: 1000px;
}
    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(180deg);
}

这是我想要实现的一个例子。

<div class="container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>

        </div>
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我对此有所了解。我使用javascript设置活动类，但您可以使用：active /：focus。这是SASS示例和live example

.flip {
  width: 100%;
  height: 100%;
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  -ms-transition: 0.6s;
  -moz-transition: 0.6s;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transition: 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;

  .active & {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  &--holder {
    display: block;
    margin-bottom: 2rem;
  }

  // Container
  &--container {
    position: relative;
    -webkit-perspective: 1000;
    -moz-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;
    width: 100%;
    height: auto;
    z-index: 100;

    .active & {
      z-index: 100;
    }
  }
  // Container end


  // face
  &--face {
    position: relative;
    width: 100%;
    height: auto;
    background-color: $color-grey;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;
    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;
    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;
    transition: 0.6s;
    transform-style: preserve-3d;

    color: #f0f0f0;

    &.front {
      position: absolute;
      height: 100%;
      -webkit-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      background-repeat: no-repeat;

      &:hover {
        background-color: $color-grey-darker;
      }

      .active & {
          background-image: none;
          background-color: $color-white;
          -webkit-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          -moz-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          -ms-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          -o-transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
          transition: 1000ms cubic-bezier(0.250, 0.250, 0.750, 0.750) background-color;
      }
    }

    &.back {
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;

        -webkit-transform: rotateY(-180deg);
        -moz-transform: rotateY(-180deg);
        -o-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
        transform: rotateY(-180deg);

        padding: 2rem;
        text-align: center;
        background-color: $color-white;
        color: $color-gray;
        fill: $color-gray;
    }

    &:hover {
      background-color: $color-grey-lighter;
    }
  }

一个HTML代码段：

<div class="flip--container">
  <article class="flip">
    <div class="front flip--face">
      <div class="flip--icon--holder">
        <i class="flip--icon fa fa-icon" aria-hidden="true"></i>
      </div>
    </div>
    <section class="back flip--face">
      <h3 class="flip--title">Title</h3>
      <ul class="flip--list">
        <li class="flip--list--item">Lorem</li>
        <li class="flip--list--item">Ipsum</li>
      </ul>
    </section>
  </article>
</div>

Answer 2

如果我理解正确，你希望翻盖卡能够快速响应，这样它就能在不破坏的情况下管理所有屏幕上的影响。为此，您需要在宽度上使用百分比而不是像素测量值。

因此，使用width: 100%;会根据每个屏幕分辨率将布局更改为该元素的100％。

这是一种方法，它是最快速，最简单的方法。

要做到这一点，您只需要向包含每一行的.flip-container添加另一个容器。然后，您将.flip-container位置更改为relative。现在，您需要将.flip-container, .front, .back选择器的宽度更改为100％。这样，新容器将处理整行的宽度。

这是一个例子：

＆＃13;

.card-container{
    width: 100%; /* Adjust the target width*/
}
.flip-container {
    position: relative;
    perspective: 1000px;

}

    /* flip the pane when hovered */
    .flip-container:hover .flipper, .flip-container.hover .flipper {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 100%;
  height: 180px;
}

/* flip speed goes here */
.flipper {
    transition: 0.9s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    
    backface-visibility: hidden;

    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.front {
    background: rgba(0,0,0,0.05);
  z-index: 2;
    /* for firefox 31 */
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
      background: #00ccff;

    transform: rotateY(180deg);
}

＆＃13;

<div class="container">
<div class="card-container">
    <div class="row">
        <div class="col">
            <div class="flip-container">
                <div class="flipper">
                    <div class="front">
                        <div class="inner">Front</div>
                    </div>
                    <div class="back">
                        <div class="inner">Back</div>
                    </div>
                </div>
            </div>
        </div>
 
    </div>
</div>
</div>

＆＃13;

如果您仍想使用固定的宽度和高度测量值（例如px）。您始终可以使用@media query并根据每个规则调整度量或整体样式。

让我们说这个元素在小屏幕分辨率上打破了。您需要做的就是为此添加规则。示例：

＆＃13;

@media screen and (max-width: 800px){
/* Your Style Here */

}

＆＃13;

只要屏幕宽度小于或等于800px，就会应用上述规则。因此，您可以使用max-width和min-width根据浏览器的屏幕宽度更改样式测量值。

Answer 3

我知道这有点旧，但是我在解决这个问题时遇到了麻烦，并且能够为带有图像的响应式翻转卡找到一个很好的解决方案（或者至少我是这么认为的）。如果您不使用图像，可能需要稍微调整一下，但这应该是一个好的开始。希望它将帮助其他人！

这是小提琴https://jsfiddle.net/d6auxzef/4/

adj_index_list = []
for user_ch in user_chans1:
    for i, decoded_ch in enumerate(decoded_chans1):
        if user_ch == decoded_ch:
            adj_index_list.append(i)
#output
In[25]: adj_index_list
Out[25]: [4, 1, 2]

使用CSS灵活调整卡片翻转效果。

3 个答案: