Javascript 元素失去了它的；rotateZ“；“当”时的值；translateX“；赋值为-CSS

我有这个测试页面，我正在工作。 正如您从代码片段中看到的，我使用

transform:rotateZ（-90度）在Z轴上旋转了“共享”条并使用
变换原点左定位：0。（注意：这是我第一次使用
变换原点
，可能是我做错了什么（？）

我想做什么：

向上滚动页面时，“共享”栏应向左移动，在视口外，保持
变换：rotateZ（-90度）属性，当页面向下滚动时，“共享”栏应重新出现在相同位置。因此，当转换发生时，它应该保持垂直移动

问题：

当页面向上滚动且“共享”栏移出视口时，
转换：translateX（-120px）
属性的动作就像
变换：rotateZ（-90度）从未声明过

如何根据滚动事件使其在所有转换期间保持垂直“固定”

也：当“共享”栏离开视口时，为什么没有
溢出-x

编辑：我尝试用
左
和
右
移动它，但在这种情况下没有
转换
时间

片段（注意：转到css文件的底部，查看
.share
元素及其样式）


const burger=document.querySelector（'.burger'）；
const nav=document.querySelector（'nav'）；
burger.addEventListener（'click'，（）=>{
nav.classList.toggle（'active'）；
burger.classList.toggle（'hide'）；
xicon.classList.toggle（'active'）；
});
const xicon=document.querySelector（'.xicon'）；
xicon.addEventListener（'click'，function（）{
nav.classList.toggle（'active'）；
xicon.classList.toggle（'active'）；
burger.classList.toggle（'hide'）；
})
const header=document.querySelector（'header'）；
设prev=window.pageYOffset；
addEventListener（'scroll'，function（）{
让当前=window.pageYOffset；
如果（上一次<当前）{
header.classList.add（'hide'）；
}
否则{
header.classList.remove（'hide'）；
}
prev=当前值；
})
const shareshing=document.querySelector（'.share'）；
让prevScroll=window.pageYOffset；
addEventListener（'scroll'，function（）{
让currentScroll=window.pageYOffset；
如果（prevScroll{
icons.classList.toggle（'active'）；
})
*{
保证金：0；
填充：0；
框大小：边框框；
}
洛甘迪肯先生{
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
背景：粉蓝；
填充：.7em0；
}
.标志{
左侧边缘：.5em；
}
.汉堡{
右边距：1米；
z指数：2；
}
.汉堡.皮{
显示：无；
}
海军ulli a{
文字装饰：无；
颜色：黑色；
字体系列：verdana；
}
李国荣{
文本对齐：居中；
列表样式：无；
}
导航{
填充：1em 0；
线高：2米；
背景：浅绿色；
显示：无；
}
主动导航{
显示：块；
}
西贡先生{
位置：绝对位置；
右：1em；
显示：无；
}
.西贡{
显示：块；
}
标题{
宽度：100vw；
位置：固定；
}
header.hide{
显示：无；
}
主要{
垫顶：4em；
}
.一{
宽度：20px；
高度：20px；
背景：蓝色；
颜色：白色；
}
.二{
宽度：20px；
高度：20px；
背景：绿色；
颜色：白色；
}
.三{
宽度：20px；
高度：20px；
背景：红色；
颜色：白色；
}
.这边{
宽度：30px；
高度：100px；
显示器：flex；
弯曲方向：立柱；
证明内容：周围的空间；
对齐项目：居中；
位置：固定；
最高：50%；
背景：黑色；
显示：无；
边界半径：10px；
}
.side.active{
显示器：flex；
}
.侧边{
显示：无；
}
.分享{
位置：固定；
最高：50%；
背景：黑色；
颜色：白色；
字体系列：verdana；
字体大小：1.3rem；
变换：旋转（-90度）；
变换原点：0；
填充物：15em 1em；
边界半径：10px；
边框：1px纯白；
过渡：1s；
}
.分享.隐藏{
转换：translateX（-120px）；
}

标志





共享
食品饮料
免疫球蛋白
Tw
Lorem ipsum dolor sit amet，奉献精英。比如说，动物的生命周期，时间周期，时间周期，时间周期。我们的发明者是维尼安的临时秘书。在温和和温和的环境中，动物的选择是正确的。Expedita deserunt，ab dolor accusamus sequi eum optio。这是一个很好的解释！Accusamus，别名，非。在自然和选择权方面，cupiditate saepe quisquam totam laboriosam ullam nihil Constructure rem earum of Perpiciatis。发明者多洛雷斯·卡斯（dolores quas）的身份是什么？智慧的平等性是一种选择，它阻碍了人们的生存和发展。现代建筑设计师赞颂beatae repellat harum deleinit Face在软骨病预防中的作用，并再次强调解决面部问题的方法——耳部问题的解决方案——自由、持续、健康、体弱！最后，我要说的是，我的生命中没有布兰迪，我的生命中没有普罗维登斯
margin-left: -35px;.