如何在底部反射像镜子一样的杂色文字

Question

您好，尝试使用css3像镜像一样反映标题文本。文字详细信息需要反映在底部区域

<h2>This is my heading</h2>
h2{
-webkit-box-shadow: 3px 3px 5px 6px #ccc; 
}

Answer 1

h2{
-webkit-box-shadow: 3px 3px 5px 6px #ccc; 
 display: inline-block;
  width: 100%;
  font-family: "Helvetica Neue", "Arial";
  font-size: 3em;
  font-weight: 100;
  text-transform: uppercase;
  letter-spacing: 3px;  
  text-align: center;
}

.text-reflect, .text-reflect:before, .text-reflect span {
  display: block;
  margin: 0;
  padding: 0;
}

.text-reflect, .text-reflect:before, .text-reflect:after {
  position: relative;
}

.text-reflect {
  top: -60px;
}

.text-reflect:before {
  content: 'This is my heading';
  top: 95px;
  transform: scale(1, -1);
  backface-visibility: visible; 
  z-index: 1;
}

.text-reflect:after {
  content: '';
  display: block;
  top: -10px;
  left: 0;
  width: 100%;
  height: 60px; 
  background-image: linear-gradient(to bottom, rgba(255,255,255, .4) 0%, rgba(255, 255, 255, 1) 50%);
  z-index: 2;
}

<h2 class="text-reflect">This is my heading</h2>

Answer 2

h2{font-family:Arial;}
h2.e{  
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
position:relative;top:-20px;color:#ccc
}

<h2>This is my heading</h2>
<h2 class="e">This is my heading</h2>

您可以使用CSS转换来实现此目的。垂直翻转会涉及到像这样缩放div：

-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);

https://jsfiddle.net/91dsmg2k/3/