Javascript 我想翻转或旋转此功能区文本以使其可读？

我不想旋转长方体，我只想旋转或翻转功能区长方体上的文本

如果直接旋转长方体，将干扰字符串动画

（函数（）{
var STATE_CLOSED=0，
状态_=1，
状态_=2，
标签高度=30，
标签宽度=200，
最大应变=40，
//需要拖动的页面高度的系数
//落幕
阻力阈值=0.36；
供应商=['Webkit'、'Moz'、'O'、'ms']；
变量dom={
ribbon:null，
ribbonString:null，
ribbonTag:null，
幕布：空，
关闭按钮：空
},
//功能区的当前状态
state=state\u关闭，
//功能区文本，与状态相关
closedText=“”，
detachedText=“”，
摩擦力=1.04；
重力=1.5，
//窗帘关闭时色带的静止位置
closedX=标签宽度*0.55，
closedY=-TAG_HEIGHT*0.1，
//窗帘打开时色带的静止位置
openedX=标签宽度*0.4，
openedY=标记高度，
速度=0，
旋转=45，
缩减率=0，
curtainCurrentY=0，
拖动=false，
dragTime=0，
dragY=0，
anchorA=新点（closedX，closedY），
锚点=新点（闭合dx，闭合dy），
鼠标=新点（）；
函数初始化（）{
dom.ribbon=document.querySelector（'.forkit'）；
dom.窗帘=document.querySelector（“.forkit窗帘”）；
dom.closeButton=document.querySelector（'.forkit窗帘.close按钮'）；
if（dom.ribbon）{
//从DOM获取标签文本
closedText=dom.ribbon.getAttribute（‘数据文本’）| |“”；
detachedText=dom.ribbon.getAttribute（'data text detached'）| | closedText；
//构造表示所需的子元素
//它挂起的标签和字符串
dom.ribbon.innerHTML=''+closedText+''；
dom.ribbonString=dom.ribbon.querySelector（'.string'）；
dom.ribbonTag=dom.ribbon.querySelector（'.tag'）；
//绑定事件
addEventListener（'click'，onRibbonClick，false）；
document.addEventListener（'mousemove'，onMouseMove，false）；
document.addEventListener（'mousedown'，onMouseDown，false）；
document.addEventListener（'mouseup'，onMouseUp，false）；
document.addEventListener（'touchstart'，onTouchStart，false）；
文档。addEventListener（'touchmove'，onTouchMove，false）；
文件。添加的列表器（'touchend'，onTouchEnd，false）；
window.addEventListener（'resize'，layout，false）；
if（dom.closeButton）{
dom.closeButton.addEventListener（'click'，onCloseClick，false）；
}
//启动动画循环
制作动画（）；
}
}
函数onMouseDown（事件）{
if（dom.phadent&&state===state\u分离）{
event.preventDefault（）；
dragY=event.clientY；
dragTime=Date.now（）；
拖动=真；
}
}
mouseMove函数（事件）{
mouse.x=event.clientX；
mouse.y=event.clientY；
}
函数onMouseUp（事件）{
如果（状态！==打开状态）{
状态=状态\关闭；
拖动=假；
}
}
函数onTouchStart（事件）{
if（dom.phadent&&state===state\u分离）{
event.preventDefault（）；
var touch=event.touch[0]；
dragY=touch.clientY；
dragTime=Date.now（）；
拖动=真；
}
}
函数onTouchMove（事件）{
var touch=event.touch[0]；
mouse.x=touch.pageX；
mouse.y=touch.pageY；
}
函数onTouchEnd（事件）{
如果（状态！==打开状态）{
状态=状态\关闭；
拖动=假；
}
}
函数onRibbonClick（事件）{
if（dom.窗帘）{
event.preventDefault（）；
如果（状态===打开状态）{
close（）；
}
else if（Date.now（）-dragTime<300）{
open（）；
}
}
}
函数onCloseClick（事件）{
event.preventDefault（）；
close（）；
}
功能布局（）{
如果（状态===打开状态）{
缩减量=窗内高度；
curtainCurrentY=缩减量；
}
}
函数open（）{
拖动=假；
状态=打开的状态；
}
函数关闭（）{
拖动=假；
状态=状态\关闭；
dom.ribbonTag.innerHTML=closedText；
}
函数detach（）{
state=state_；
dom.ribbonTag.innerHTML=detachedText；
}
函数animate（）{
更新（）；
render（）；
请求动画帧（动画）；
}
函数更新（）{
//鼠标和右上角之间的距离
var distance=距离（mouse.x，mouse.y，window.innerWidth，0）；
//如果我们打开的话，缩减的幅度应该会向页面底部移动
如果（状态===打开状态）{
缩减目标=数学最小值（缩减目标+（window.innerHeight-缩减目标）*0.2，window.innerHeight）；
}
否则{
//将光标悬停到足够近的位置时分离标记
if（距离<标签宽度*1.5）{
分离（）；
}
//如果用户离开，请重新附加标签
如果（！拖动和状态===状态和距离>标记宽度*2）{
close（）；
}
如果（拖动）{
//拖动时更新幕墙位置
curtainTargetY=Math.max（mouse.y-dragY，0）；
//如果超过阈值，打开窗帘
如果（缩减目标>窗口内部高度*拖动阈值）{
open（）；
}
}
否则{
削减量*=0.8；
}
}
//向窗帘的目标位置移动
curtainCurrentY+=（curtainTargetY-curtainCurrentY）*0.3；
//如果我们拖动或分离，我们需要模拟
//色带的物理行为
如果（拖动| |状态===状态_）{
//施力
速度/=摩擦力；
速度+=重力；
var containerOffsetX=dom.ribbon.offsetLeft；
var offsetX=数学最大值（（（mouse.x-containerOffsetX）-closedX）*0.2，-max\u应变）；
anchorB.x+=（（closedX+offsetX）-anchorB.x）*0.1；
锚点y+=速度；
var应变=之间的距离（anchorA.x，anchorA.y，anchorB.x，anchorB.y）；
如果（应变>最大应变）{
速度-=数学abs（应变）/（最大应变*1.25）；
}
var dy=Math.max（mouse.y-anchorB.y，0），
dx=鼠标.x-（容器）
#ribbonText{
transform: rotate(180deg)
}

    <a class="forkit" data-text="<div id='ribbonText'>10% Discount</div>"
data-text-detached="Drag down >" href=""></a>