Css 将图元旋转到位

我正在创建一个动画侧边栏，并尝试将一个元素（跨度，红色箭头）旋转到位，但没有成功。除了向左移动一定量之外，元素也向上移动

如何将箭头旋转到位，使其保持在相同的位置，不会向左或向上移动

@导入url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400300600）；
@字体面{font-family:“ionicons”；src:url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1“”；src:url（“”）https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1#iefix）格式（“嵌入式opentype”），url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.ttf?v=2.0.1）格式（“truetype”），网址（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.woff?v=2.0.1）格式（“woff”），url（“https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.svg?v=2.0.1#Ionicons）格式（“svg”）；字体大小：正常；字体样式：正常；}
.侧边栏{
宽度：230px；
身高：100%；
位置：固定；
填充：1雷姆1.5雷姆；
背景色：#F9FAFC；
字体系列：“源Sans-Pro”；
字体大小：14px；
框大小：边框框；
}
保险商实验室{
列表样式：无；
}
李先生{
填充：0；
保证金：0；
}
李{
填充：0.5rem 0；
}
.子菜单{
最大高度：0；
溢出y：隐藏；
保证金：0-1.5雷姆；
背景色：#F4；
}
.子菜单li：第一个孩子{
填充：0.1雷姆0.1.5雷姆；
}
.子菜单li：最后一个子菜单{
填充：0.1雷姆1.5雷姆；
}
.子菜单li{
填充：0.5雷姆1.5雷姆；
}
.menu li:悬停>.子菜单{
最大高度：200px；
填充：0.5rem 0；
过渡：最大高度0.7s线性；
}
.menu>li:悬停{
背景色：#F4；
保证金：0-1.5雷姆；
填充：0.5雷姆1.5雷姆；
}
.菜单>李{
位置：相对位置；
颜色：#4444；
字体大小：粗体；
}
.菜单>李>a{
显示：块；
颜色：#4444；
文字装饰：无；
字体大小：粗体；
}
.menu>li>a:悬停{
颜色：黑色；
}
.子菜单>li>a{
显示：块；
颜色：#626262；
文字装饰：无；
}
.子菜单>li>a:悬停{
颜色：黑色；
}
.子菜单>li{
字体大小：正常！重要；
}
.arrow{
显示：内联块；
宽度：10px；
过渡：所有0.5s缓进缓出；
变换原点：中心；
}
.阿罗：之后{
内容：'\f125'；
字体系列：“ionicons”；
颜色：红色；
右：0.75em；
位置：绝对位置；
宽度：10px；
字体大小：0.5em；
最高：45%；
}
.menu>li:悬停箭头{
变换：旋转（90度）；
}

交易


查看交易记录
虚拟交易



预算

位置：相对于

.arrow

或从伪元素中删除绝对值如果要调整位置，请调整

arrow

中的一个，而不是伪元素如果保持

位置

，然后，您可以更改正在旋转的元素的值。@TylerH这不会真正解决问题，因为在他的情况下，旋转扮演着位置：相对的角色，使伪元素相对于悬停时的父元素定位，而最初它是相对于

li

（第一个定位的祖先）。这是导致跳转的原因。@Temaniaf如果是的话，我跳进小提琴，用大约5或10px的偏移量将

位置：relative

应用到父对象上，以修复该问题，但即使旋转轴仍然有点僵硬