1. ホーム
  2. 質問と答え
  3. フレキシブルサイズのCSSを使用したカード反転効果。

フレキシブルサイズのCSSを使用したカード反転効果。

2017-04-20 6 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％にレイアウトが変更されます。

これは1つのアプローチであり、最も簡単で簡単な方法です。

これを行うには、各行を含む.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

関連する問題

 関連する問題