Javascript 使用transform:rotate（）时代码变慢；

今天我在codepen上制作了一个css项目，我想在其中制作一个可悬停区域，在悬停时改变它的属性。为此，我使用了许多“p”标记并进行了一些控制。但是当我使用transform:rotate（）时属性标记悬停 速度越来越慢了。 当我不在标签上使用transform时，它工作得很顺利。所以有没有办法提高使用transform属性的速度呢。 还有什么方法不需要复制粘贴很多标签

注意：变换属性工作正常，但速度非常慢。我在很多浏览器中都进行了检查，但都很慢

这是代码链接

$（文档）.ready（函数（）{
$（“p”）.addClass（'def_bg def_hov_bg def_time def_anim'）；
$（“#bg#u col_1”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_1”）；
$（.def_bg”）.removeClass（“bg_2 bg_3 bg_9 bg_4 bg_5 bg_6 bg_7 bg_8”）；
});
$（“#bg#u col_2”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_2”）；
$（.def_bg”）.removeClass（“bg_1 bg_3 bg_4 bg_9 bg_5 bg_6 bg_7 bg_8”）；
});
$（“#bg#u col_3”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_3”）；
$（.def_bg”）.removeClass（“bg_1 bg_2 bg_4 bg_9 bg_5 bg_6 bg_7 bg_8”）；
});
$（“#bg#u col_4”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_4”）；
$（.def_bg”）.removeClass（“bg_1 bg_2 bg_3 bg_9 bg_5 bg_6 bg_7 bg_8”）；
});
$（“#bg#u col_5”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_5”）；
$（.def_bg”）.removeClass（“bg_1 bg_2 bg_3 bg_4 bg_9 bg_6 bg_7 bg_8”）；
});
$（“#bg#u col_6”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_6”）；
$（.def_bg”）.removeClass（“bg_1 bg_2 bg_3 bg_4 bg_5 bg_9 bg_7 bg_8”）；
});
$（“#bg#u col_7”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_7”）；
$（.def_bg”）.removeClass（“bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_9 bg_8”）；
});
$（“#bg#u col_8”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_8”）；
$（.def_bg”）.removeClass（“bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_7 bg_9”）；
});
$（“#bg#u col_9”）。单击（函数（）{
$（.def_bg”）.toggleClass（“bg_9”）；
$（.def_bg”）.removeClass（“bg_1 bg_2 bg_3 bg_4 bg_5 bg_6 bg_7 bg_8”）；
});
$（“#hov#u col_1”）。单击（函数（）{
$（“.def_hov_bg”）。切换类（“hov_1”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9”）；
});
$（“#hov#u col_2”）。单击（函数（）{
$（.def_hov_bg”）.toggleClass（“hov_2”）；
$（.def_hov_bg”）.removeClass（“hov_1 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9”）；
});
$（“#hov#u col_3”）。单击（函数（）{
$（“.def_hov_bg”）。切换类（“hov_3”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_1 hov_4 hov_5 hov_6 hov_7 hov_8 hov_9”）；
});
$（“#hov#u col_4”）。单击（函数（）{
$（“.def_hov_bg”）。切换类（“hov_4”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_3 hov_1 hov_5 hov_6 hov_7 hov_8 hov_9”）；
});
$（“#hov#u col_5”）。单击（函数（）{
$（.def_hov_bg”）.toggleClass（“hov_5”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_3 hov_4 hov_1 hov_6 hov_7 hov_8 hov_9”）；
});
$（“#hov#u col_6”）。单击（函数（）{
$（.def_hov_bg”）.toggleClass（“hov_6”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_3 hov_4 hov_5 hov_1 hov_7 hov_8 hov_9”）；
});
$（“#hov#u col_7”）。单击（函数（）{
$（.def_hov_bg”）。切换类（“hov_7”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_3 hov_4 hov_5 hov_6 hov_1 hov_8 hov_9”）；
});
$（“#hov#u col_8”）。单击（函数（）{
$（“.def_hov_bg”）。切换类（“hov_8”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_1 hov_9”）；
});
$（“#hov#u col_9”）。单击（函数（）{
$（.def_hov_bg”）。切换类（“hov_9”）；
$（.def_hov_bg”）.removeClass（“hov_2 hov_3 hov_4 hov_5 hov_6 hov_7 hov_8 hov_1”）；
});
$（“#t-1”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-1”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11”）；
});
$（“#t-2”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-2”）；
$（“.def_time”）.removeClass（“td-1 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11”）；
});
$（“#t-3”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-3”）；
$（“.def_time”）.removeClass（“td-2 td-1 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-11”）；
});
$（“#t-4”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-4”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-1 td-5 td-6 td-7 td-8 td-9 td-10 td-11”）；
});
$（“#t-5”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-5”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-1 td-6 td-7 td-8 td-9 td-10 td-11”）；
});
$（“#t-6”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-6”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-5 td-1 td-7 td-8 td-9 td-10 td-11”）；
});
$（“#t-7”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-7”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-5 td-6 td-1 td-8 td-9 td-10 td-11”）；
});
$（“#t-8”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-8”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-5 td-6 td-7 td-1 td-9 td-10 td-11”）；
});
$（“#t-9”）。单击（函数（）{
$（“.def_time”）。切换类别（“td-9”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-1 td-10 td-11”）；
});
$（“#t-10”）。单击（函数（）{
$（“.def_time”）.toggleClass（“td-10”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-1 td-11”）；
});
$（“#t-11”）。单击（函数（）{
$（“.def_time”）。切换类别（“td-11”）；
$（“.def_time”）.removeClass（“td-2 td-3 td-4 td-5 td-6 td-7 td-8 td-9 td-10 td-1”）；
});
$（“#e-1”）。单击（函数（）{
$（.def_anim”）.toggleClass（“ef-1”）；
$（.def_anim”）.removeClass（“ef-2 ef-3 ef-4 ef-5 ef-6 ef-7 ef-8”）；
});
$（“#e-2”）。单击（函数（）{
$（.def_anim”）.toggleClass（“ef-2”）；
$（.def_anim”）.removeClass（“ef-1 ef-3 ef-4 ef-5 ef-6 ef-7 ef-8”）；
});
$（“#e-3”）。单击（函数（）{
$（.def_anim”）.toggleClass（“ef-3”）；
$（.def_anim”）.removeClass（“ef-2 ef-1 ef-4 ef-5 ef-6 ef-7 ef-8”）；
});
$（“#e-4”）。单击（函数（）{
$（.def_anim”）.toggleClass（“ef-4”
- for (var x = 0; x < 5; x++)
     p

<!-- Five just like in the loop -->
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>