Css 3D转换div以在其上使用文本功能区翻转时出现问题

我已经创建了一个产品框，当鼠标悬停在翻页上时，它会显示产品图像，以显示产品的详细信息，效果很好。问题是，当该产品上有功能区并翻转时，功能区中的文本也会翻转（它的位置是正确的），我需要以某种方式对该文本进行额外转换，以便即使在翻转时也能正确显示顶部。可能吗

。功能区包装器绿色{
宽度：85px；
高度：88px；
溢出：隐藏；
位置：绝对位置；
顶部：-3px；
右：-3px；
z指数：5；
}
.丝带绿{
字体：粗体15px无衬线；
颜色：#333；
文本对齐：居中；
文本阴影：rgba（255255255,0.5）0px 1px 0px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
位置：相对位置；
填充：7px0；
左：-5px；
顶部：15px；
宽度：120px；
背景色：#BFDC7A；
背景图像：-webkit渐变（线性、左上、左下、从（#BFDC7A）到（#8EBF45））；
背景图像：-webkit线性渐变（顶部，#BFDC7A，#8EBF45）；
背景图像：-moz线性梯度（顶部，#BFDC7A，#8EBF45）；
背景图像：-ms线性梯度（顶部，#BFDC7A，#8EBF45）；
背景图像：-o-线性梯度（顶部，#BFDC7A，#8EBF45）；
颜色：#6a6340；
-网络工具包盒阴影：0px 0px 3px rgba（0,0,0,0.3）；
-moz盒阴影：0px 0px 3px rgba（0,0,0,0.3）；
盒影：0px 0px 3px rgba（0,0,0,0.3）；
}
.ribbon绿色：之前，.ribbon绿色：之后{
内容：“；
边框顶部：3px实心#6e8900；
左边框：3倍实心透明；
右边框：3px实心透明；
位置：绝对位置；
底部：-3px；
}
.丝带绿：之前{
左：0；
}
.丝带绿：之后{
右：0；
}
.产品盒{
宽度：292px；
高度：340px；
}
.拇指套{
身高：100%；
背景颜色：紫色；
}
.产品盒img{
宽度：100%；
位置：绝对位置；
显示：块；
背面可见性：隐藏；
}
.产品盒.拇指细节{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：蓝色；
背面可见性：隐藏；
}
.product-box.flip{
透视图：800px；
}
.product-box.flip.thumb包装器{
转变：转变1s；
变换样式：保留-3d；
}
.product-box.flip.thumb详细信息，.product-box.flip:hover.thumb包装器{
变换：旋转（-180度）；
}

顶部

注意：我最初误解了这个问题，并给出了错误的答案。不想删除它，因此修改了原始答案以仍然解决问题，尽管在过程中使问题更加复杂。Tambo的回答中提供了最佳方法。如果出于某种原因希望在不复制元素的情况下实现效果，则可以使用此方法

您可以使用

class=“ribbon wrapper green”

在

div

上添加

rotateY（-180deg）

，然后将其放置在另一侧。原始定位为

右：-3px

，悬停时，我们将其更改为

左：-3px

或

右：210px（框宽292px+偏移量3px-带状容器的宽度85px）

在此之后，整个功能区将按所需像素（复杂部分）平移，以定位在屏幕左侧。现在，即使位置正确，功能区也必须反向旋转，使其看起来像功能区，因此添加了
旋转（-90度）
（-90度元素最初旋转45度，必须将其置零才能返回正常位置，然后我们必须沿相反方向再旋转45度）

注意：动画/过渡效果不是很好，但我认为你可以解决这个问题


。功能区包装器绿色{
宽度：85px；
高度：88px；
溢出：隐藏；
位置：绝对位置；
顶部：-3px；
右：-3px；
z指数：5；
}
.丝带绿{
字体：粗体15px无衬线；
颜色：#333；
文本对齐：居中；
文本阴影：rgba（255，255，255，0.5）0px 1px 0px；
-webkit变换：旋转（45度）；
-moz变换：旋转（45度）；
-ms变换：旋转（45度）；
-o变换：旋转（45度）；
位置：相对位置；
填充：7px0；
左：-5px；
顶部：15px；
宽度：120px；
背景色：#BFDC7A；
背景图像：-webkit渐变（线性、左上、左下、从（#BFDC7A）到（#8EBF45））；
背景图像：-webkit线性渐变（顶部，#BFDC7A，#8EBF45）；
背景图像：-moz线性梯度（顶部，#BFDC7A，#8EBF45）；
背景图像：-ms线性梯度（顶部，#BFDC7A，#8EBF45）；
背景图像：-o-线性梯度（顶部，#BFDC7A，#8EBF45）；
颜色：#6a6340；
-webkit盒阴影：0px 0px 3px rgba（0,0,0,0.3）；
-moz盒阴影：0px 0px 3px rgba（0,0,0,0.3）；
盒影：0px 0px 3px rgba（0,0,0,0.3）；
}
.ribbon green:之前，
.丝带绿：之后{
内容：“；
边框顶部：3px实心#6e8900；
左边框：3倍实心透明；
右边框：3px实心透明；
位置：绝对位置；
底部：-3px；
}
.丝带绿：之前{
左：0；
}
.丝带绿：之后{
右：0；
}
.产品盒{
宽度：292px；
高度：340px；
}
.拇指套{
身高：100%；
背景颜色：紫色；
}
.产品盒img{
宽度：100%；
位置：绝对位置；
显示：块；
背面可见性：隐藏；
}
.产品盒.拇指细节{
宽度：100%；
身高：100%；
位置：绝对位置；
背景：蓝色；
背面可见性：隐藏；
}
.product-box.flip{
透视图：800px；
}
.product-box.flip.thumb包装器{
-webkit转换：-webkit转换1s；
转变：转变1s；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
}
.product-box.flip.thumb详图，
.产品盒.翻转：悬停.拇指包装{
-webkit变换：旋转（-180度）；
变换：旋转（-180度）；