Html 在CSS中添加转换后，div元素的行为异常

这是我的文件

TL；DR-反复将鼠标悬停在两个div元素上，以注意它们的行为。

正文{
保证金：10雷姆；
边缘顶部：5雷姆；
}
h1{
文本对齐：居中；
}
div{
位置：绝对位置；
填充：2rem；
宽度：50px；
高度：50px；
字体大小：较大；
背景色：浅绿色；
}
娱乐节目{
顶部：18rem；
变换：透视（200px）平移（50px）旋转（30度）倾斜（-20度，-5度）；
过渡性质：全部；
过渡时间：3s；
}
div#乐趣：悬停{
转换：取消设置；
}
div#move{
过渡：右2s；
}
div#move:悬停{
右：10雷姆；
}

尝试创新
移动



有趣

当您使用CSS

转换时，
#move
div
需要一个初始值作为要转换的
right
属性

div#move{
右：0；
过渡：右2s；
}
div#move:悬停{
右：10雷姆；
}