如何像底部的镜子一样反映隐藏的文本

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/