在移动设备下显示翻页卡片的全部内容

Question

我有一张翻盖卡片 css/html，它在鼠标悬停时翻动。一切正常，除了在移动设备上。几乎不可能被翻转。用户按住显示屏，直到它翻转到背面，然后不能再翻转到前面。

是否有可能在移动设备上以某种方式将两面显示在另一面之下？在同一屏幕上，例如禁用翻转部分，仅在一页上显示所有信息。

这是我目前的 html 和 css

.small-text {
    font-weight: 300;
}
.back .main { font-weight: 300;}
/* entire container, keeps perspective */
.card-container {
   -webkit-perspective: 800px;
   -moz-perspective: 800px;
     -o-perspective: 800px;
        perspective: 800px;
        margin-bottom: 30px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
 -webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}


.card-container.static:hover .card,
.card-container.static.hover .card {
 -webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
    transform: none;
}
/* flip speed goes here */
.card {
  -webkit-transition: -webkit-transform .5s;
   -moz-transition: -moz-transform 1.0s;
     -o-transition: -o-transform 1.0s;
        transition: transform 1.0s;
-webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
     -o-transform-style: preserve-3d;
        transform-style: preserve-3d;
 position: relative;
 
}

/* hide back of pane during swap */
.front, .back {
 -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
     -o-backface-visibility: hidden;
        backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
    
}

/* front pane, placed above back */
.front {
 z-index: 2;
 
}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY( 180deg );
   -moz-transform: rotateY( 180deg );
     -o-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
        z-index: 3;
}

/*        Style       */

.card{
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    color: #444444;
}
.card-container, .front, .back {
 width: 100%;
 height: 120px;
 border-radius: 4px;
}

.card .content{
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px;
}
.card .content .main {
    min-height: 160px;
}
.card .back .content .main {
    height: 215px;
}
.card .name {
    font-size: 22px;
    line-height: 28px;
    margin: 10px 0 0;
    text-transform: capitalize;
}
.card .profession{
 color:black;
    margin-bottom: 20px;
    font-weight: 300;
}

<div class="container main-card">  
             <div class="card-container">
                <div class="card">
                    <div class="front">                       
                        <div class="content">       
                            <div class="main">
                                <h3 class="name"><span style="font-size:56px;"><span style="font-family:oswald-medium,oswald,sans-serif;font-weight:900;">Header</span></span></h3>                     
                                
                                <p class="small-text" style="font-size: 18px;width: 385px;color:#414141;">Lorem ipsum</p>
                            </div>
                        </div>
                    </div> <!-- end front panel -->
                    <div class="back">
                        <div class="content" style="margin-top: 20%;">
                            <div class="main">

                                <h6 style="font-size: 20px;color:#414141 !important;cursor: pointer;font-family: 'Roboto Condensed' !important;"><a href="mailto:">mail@example.com</a></h6>
                                <h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 1</h6>
                                <h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 2</h6>

                            </div>
                        </div>
                    </div> <!-- end back panel -->
                </div> <!-- end card -->
            </div> <!-- end card-container -->
        </div> <!-- end col sm 3 -->

Answer 1

您需要使用媒体查询并将整个 CSS 放入媒体查询中，然后分别处理每个尺寸。

@media screen and (min-width: 640px) {
  .small-text {
    font-weight: 300;
  }
  .back .main {
    font-weight: 300;
  }
  /* entire container, keeps perspective */
  .card-container {
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    -o-perspective: 800px;
    perspective: 800px;
    margin-bottom: 30px;
  }
  /* flip the pane when hovered */
  .card-container:not(.manual-flip):hover .card,
  .card-container.hover.manual-flip .card {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
  }
  .card-container.static:hover .card,
  .card-container.static.hover .card {
    -webkit-transform: none;
    -moz-transform: none;
    -o-transform: none;
    transform: none;
  }
  /* flip speed goes here */
  .card {
    -webkit-transition: -webkit-transform .5s;
    -moz-transition: -moz-transform 1.0s;
    -o-transition: -o-transform 1.0s;
    transition: transform 1.0s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
  }
  /* hide back of pane during swap */
  .front,
  .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
  }
  /* front pane, placed above back */
  .front {
    z-index: 2;
  }
  /* back, initially hidden pane */
  .back {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
    z-index: 3;
  }
  /*        Style       */
  .card {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    color: #444444;
  }
  .card-container,
  .front,
  .back {
    width: 100%;
    height: 120px;
    border-radius: 4px;
  }
  .card .content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px;
  }
  .card .content .main {
    min-height: 160px;
  }
  .card .back .content .main {
    height: 215px;
  }
  .card .name {
    font-size: 22px;
    line-height: 28px;
    margin: 10px 0 0;
    text-transform: capitalize;
  }
  .card .profession {
    color: black;
    margin-bottom: 20px;
    font-weight: 300;
  }
}

@media screen and (max-width: 640px) {
  .small-text {
    font-weight: 300;
  }
  .main {
    font-weight: 300;
  }
  /*        Style       */
  .card {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    color: #444444;
  }
  .card-container,
  .front,
  .back {
    width: 100%;
    height: 50px;
    border-radius: 4px;
  }
  .card .content {
    background-color: rgba(0, 0, 0, 0);
    box-shadow: none;
    padding: 10px 20px 20px;
  }
  .card .content .main {
    min-height: 160px;
  }
  .card .back .content .main {
    height: 215px;
  }
  .card .name {
    font-size: 22px;
    line-height: 28px;
    margin: 10px 0 0;
    text-transform: capitalize;
  }
  .card .profession {
    color: black;
    margin-bottom: 20px;
    font-weight: 300;
  }
}

<div class="container main-card">
  <div class="card-container">
    <div class="card">
      <div class="front">
        <div class="content">
          <div class="main">
            <h3 class="name"><span style="font-size:56px;"><span style="font-family:oswald-medium,oswald,sans-serif;font-weight:900;">Header</span></span>
            </h3>

            <p class="small-text" style="font-size: 18px;width: 385px;color:#414141;">Lorem ipsum</p>
          </div>
        </div>
      </div>
      <!-- end front panel -->
      <div class="back">
        <div class="content" style="margin-top: 20%;">
          <div class="main">

            <h6 style="font-size: 20px;color:#414141 !important;cursor: pointer;font-family: 'Roboto Condensed' !important;"><a href="mailto:">mail@example.com</a></h6>
            <h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 1</h6>
            <h6 style="font-size: 20px;color:#414141;font-family: 'Roboto Condensed';">Phone 2</h6>

          </div>
        </div>
      </div>
      <!-- end back panel -->
    </div>
    <!-- end card -->
  </div>
  <!-- end card-container -->
</div>
<!-- end col sm 3 -->

在移动设备下显示翻页卡片的全部内容

Showing full content of the flip card under mobile devices

html

css

flip