HTML / CSS文本不在框内缩进

Question

此网页用于为框设置动画并显示一些文本详细信息，但是当框翻转时，我无法在框内缩进我的文字

我想使我的包装盒的文本尺寸变小，这将被翻转。 但是，文本不会受到align的影响。 我想将所有文本添加到框中，并且它们不应越过框。

https://codepen.io/srinabh/pen/XBKQdm

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="my_options" required id="id_my_options">
		<option value="" selected>Choose..</option>
		<option value="C">Car</option>
		<option value="H">House</option>
		<option value="A">Airplane</option>
</select>

<select name="my_options_two"  id="id_my_options_two" multiple="multiple">
		<option value="C">Car2</option>
		<option value="H">House2</option>
		<option value="A">Airplane2</option>
</select>

<select name="my_options_three"  id="id_my_options_three" multiple="multiple">
		<option value="O">yet another option</option>
		<option value="C">Car3</option>
		<option value="H">House3</option>
		<option value="A">Airplane3</option>
</select>
<br><br>
<select name="my_options_four"  id="id_your_options_four" multiple="multiple">
		<option value="O">and some unrelated options</option>
		<option value="C">Car3</option>
		<option value="H">House3</option>
		<option value="A">Airplane3</option>
</select>

flexbox{
	margin: 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
}
.panels{
  list-style-type: none;
  padding: 0;
   width: 100%;
  margin: 2% auto;
}

.panels li{
  position: relative;
  width: 20%;
  margin: 5px;
  display: block;
  box-sizing: border-box;
  float: left
}

.panels li div{
  width: 100%;
  padding: 50% 0;
  text-align: center;
  line-height: 0;
  cursor: pointer;
    -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0,0.2);
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
}

.panels div.back{
  background: linear-gradient(to bottom, #e40000, #f07611);
	transform: rotateY(90deg);

  font-family: Cabin;
  font-size: 1.4707843137254901vw;
  color: #3d4250;
		position: absolute;
    left: 0;
    top:0;
}
.panel div.front{
  background: white;  
  font-family: Cabin;
  font-size: 1.9607843137254901vw;
  color: #3d4250;
	  position: relative;
}

/*// ANIMATION STYLES //*/

.panels li:hover div.front{
  animation: twirl 0.2s ease-in forwards;
}

.panels li:hover div.back{
  animation: twirl 0.2s 0.2s ease-in forwards reverse;  
}
@keyframes twirl{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(90deg);
  }
}

Answer 1

删除行高将解决文本重叠的问题。

.panels li div{
  width: 100%;
  padding: 50% 0;
  text-align: center;
  /*line-height: 0;*/
  cursor: pointer;
    -moz-box-shadow: 0px 2px 7px rgba(0, 0, 0,0.2);
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, .2);
}

并在div上增加高度。

.panels div.back{
        background: linear-gradient(to bottom, #e40000, #f07611);
        transform: rotateY(90deg);
        height: 18px;
        font-family: Cabin;
        /* font-size: 1.4707843137254901vw;*/
        color: #3d4250;
          position: absolute;
          left: 0;
          top:0;
      }
      .panel div.front{
        background: white;  
        font-family: Cabin;
        /*font-size: 1.9607843137254901vw;*/
         color: #3d4250;
          position: relative;
      }