1. 首頁
  2. 問答
  3. 使用具有靈活大小的CSS的卡片翻轉效果。

使用具有靈活大小的CSS的卡片翻轉效果。

2017-04-20 19 views
0

我想在這個blog post中使用卡片翻轉效果作爲我正在開發的一個項目。但是，我無法使用卡片寬度和高度的固定值，因爲我需要考慮不同的屏幕尺寸。使用具有靈活大小的CSS的卡片翻轉效果。

這裏是在後的代碼：

.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>

來源

2017-04-20 Radwa Sherif

回答

0

如果我理解正確的話，你要倒裝卡響應，因此將管理其影響在所有屏幕沒有打破。 要做到這一點，你需要使用寬度的百分比而不是像素測量。

因此，使用width: 100%;將根據每個屏幕分辨率將佈局更改爲該元素的100％。

這是一種方法，它是最快和最簡單的一種。

要做到這一點，您只需將另一個容器添加到將包含每一行的.flip-container即可。然後您將.flip-container的位置更改爲relative。現在，您需要將.flip-container, .front, .back選擇器的寬度更改爲100％。這樣，新容器將處理整行的寬度。

這裏是一個例子：

.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); 
 
}
<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>

如果仍然希望使用固定的寬度和高度測量值（例如像素）。您始終可以使用@media query並根據每個規則調整度量或總體樣式。

假設元素打破小屏幕分辨率。你所需要做的只是爲此添加一條規則。 實施例：每當屏幕寬度小於或等於800像素

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

 
}

上述規則將被應用。因此，您可以使用max-width和min-width根據瀏覽器的屏幕寬度更改樣式度量。

來源

2017-04-21 11:22:34 iSR5

0

我工作在這一點。我使用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>

來源

2017-04-21 03:11:02

相關問題

 相關問題