флип-карты с 1px границей между - PullRequest
3 голосов
/ 08 марта 2020

Я пытаюсь положить флип-карты рядом друг с другом с границей в 1 пиксель. Флип-карты должны переноситься на дополнительные ряды. Кажется, что в механизме рендеринга есть некоторое смещение, из-за которого фон иногда просвечивает. Смотрите случайные красные линии между рамкой и содержимым флип-карты здесь: ссылка на jsfiddle . Любые предложения по преодолению этой проблемы?

Мой код:

.flip-card-row {
    display: flex;
    flex-wrap: wrap
}

.flip-card-col {
    background-color: red;
    position: relative;
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%
}

@media (min-width: 800px) {
    .flip-card-col {
        flex:0 0 16.6666666667%;
        max-width: 16.6666666667%
    }
}

.flip-card-col-border {
    border-bottom: 1px solid #c7c9c8;
    border-right: 1px solid #c7c9c8
}

@media (max-width: 800px) {
    .flip-card-col-border:nth-child(-n+3) {
        border-top:1px solid #c7c9c8
    }

    .flip-card-col-border:nth-child(3n+1) {
        border-left: 1px solid #c7c9c8
    }
}

@media (min-width: 800px) {
    .flip-card-col-border:nth-child(-n+6) {
        border-top:1px solid #c7c9c8
    }

    .flip-card-col-border:nth-child(6n+1) {
        border-left: 1px solid #c7c9c8
    }
}

.square {
    padding-top: 100%
}

.panel {
    background-color: #c7c9c8;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-perspective: 600px;
    perspective: 600px
}

.panel .front,.panel .back {
    position: absolute;
    width: inherit;
    height: inherit;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.4s ease-in;
    -o-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in
}

.panel .back {
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg)
}

.panel:hover .front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.panel:hover .back {
    -webkit-transform: rotateY(0);
    transform: rotateY(0)
}

.bg-light-blue {
    background: #72899b
}

.bg-white {
    background: #fff
}
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>


      <p></p>
      <div class="flip-card-row">
       	
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
          <div class="flip-card-col flip-card-col-border">
        	  <div class="square">
        	  	<div class="panel">
                  <div class="front bg-white">
                  </div>
                  <div class="back bg-light-blue">
                  </div>
              </div>
            </div>
          </div>       
        
      </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...