Html 为什么过渡不起作用？

当你将鼠标移到黄色方块上时，我正在尝试设置它的动画。我想我已经尝试了几乎所有的方法，但它不想移动。但是，如果我对输入字段应用相同的转换和变换，它将开始旋转。这里有什么问题？谢谢你的帮助

#sqre{
显示：块；
宽度：200px；
高度：200px；
背景颜色：金色；
边框：2件纯黑；
过渡：1s；
}
#sqre：悬停{
变换：旋转（360度）；
}

方形

看这里，我将

rotateZ

更改为

-webkit transform:rotate（360度）

，它可以完美地工作

---

看这里，我将

rotateZ

更改为

-webkit transform:rotate（360度）

，它可以完美地工作

---

您在问题中使用的代码似乎工作正常。 您可以在下面看到它的作用：

#sqre{
显示：块；
宽度：200px；
高度：200px；
背景颜色：金色；
边框：2件纯黑；
过渡：1s；
}
#sqre：悬停{
变换：旋转（360度）；
}

square

看起来您在问题中使用的代码工作正常。 您可以在下面看到它的作用：

#sqre{
显示：块；
宽度：200px；
高度：200px；
背景颜色：金色；
边框：2件纯黑；
过渡：1s；
}
#sqre：悬停{
变换：旋转（360度）；
}

square

它不适用于我发布的代码，也不适用于-webkit-前缀。这真的很奇怪，因为输入字段转换工作得非常好。这可能是safari手机的问题吗

它不适用于我发布的代码，也不适用于-webkit-前缀。这真的很奇怪，因为输入字段转换工作得非常好。这可能是safari手机的问题吗

在移动设备上不可能悬停，因为默认情况下，最后一个触摸点没有持久的光标记忆

他们感知交互的唯一方式是触摸，这类似于点击或选择，因此Javascript中的onclick是其他适合移动设备的观点

$（'#sqre'）。单击（函数（）{
$（this.toggleClass（'toggle'）；
$（'#sqre'）。不是（这个）。removeClass（'toggle'）；
});
#sqre{
显示：块；
宽度：200px；
高度：200px；
背景颜色：金色；
边框：2件纯黑；
过渡：1s；
}
#方形开关{
变换：旋转（360度）；
}

方形
在移动设备上不可能悬停，因为默认情况下没有最后一个触摸点的持久光标记忆

他们感知交互的唯一方式是触摸，这类似于点击或选择，因此Javascript中的onclick是其他适合移动设备的观点


$（'#sqre'）。单击（函数（）{
$（this.toggleClass（'toggle'）；
$（'#sqre'）。不是（这个）。removeClass（'toggle'）；
});
#sqre{
显示：块；
宽度：200px；
高度：200px；
背景颜色：金色；
边框：2件纯黑；
过渡：1s；
}
#方形开关{
变换：旋转（360度）；
}

正方形
。你在用什么浏览器测试？手机上的Safari我无法重现这个问题。您的示例运行得非常好：您需要为safariHm使用
-webkit-
。抱歉，无法测试。但是您是否尝试将
-webkit-
前缀附加到
转换
属性？似乎表明这仍然是必要的。。你在用什么浏览器测试？手机上的Safari我无法重现这个问题。您的示例运行得非常好：您需要为safariHm使用
-webkit-
。抱歉，无法测试。但是您是否尝试将
-webkit-
前缀附加到
转换
属性？似乎表示仍有必要。请注意，您不应仅将
transform
更改为
-webkit transform
，而应保持当前属性不变，并添加一个新的-webnkit-属性，为了保持与其他浏览器的兼容性。请注意，您不应仅将
transform
更改为
-webkit transform
，您应保持当前属性不变，并添加一个新的-webnkit-属性，以保持与其他浏览器的兼容性。