Javascript 按钮'；在html/css中激发oncilck事件时的意外行为

在下面的代码中，我将按钮旋转90度并固定位置。 我需要这个按钮被固定在那个位置，即使在点击后。 然而，在点击按钮后，位置变为实际位置（0度）

单击时按钮的放大和缩小效果也不起作用

为了更好地理解问题行为，我附上了一张图片

#action_btn
{
position:absolute;
width:81px;
height:20px;
background-image:url(image/action_btn.png);
margin-top:82px;
margin-left:30px;
-ms-transform: rotate(90deg); /* IE 9 */
   -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);

}

#action_btn input
{
    width:81px;
    height:20px;
    opacity:0.0;

}

#action_btn :active{

-webkit-transform: scale(0.95,0.95);
-moz-transform:scale(0.95,0.95);    

}

欢迎提供任何帮助或建议。

我只是简单地创建了一个名为

active

的类，并使用jQuery将其添加到该div中。代码如下：

$(document).ready(function() {
    $('#action_btn').click(function() {
        $(this).addClass('active');
    });
});

对于CSS：

#action_btn.active {
    -webkit-transform: scale(0.95, 0.95);
    -moz-transform:scale(0.95, 0.95);
}

编辑：如果希望它切换类，请使用

---

当您单击红色框时，它只会激活和禁用类。

变换不是那样累加的：

：active

状态值将替换非active值，因此您只能获得比例。您需要在

：active

规则中包含旋转和缩放。如果我在active rule中写入旋转代码，则单击按钮后按钮将处于垂直位置。但当视图加载时，我需要按钮处于垂直位置。我不是说要删除非活动规则。我是说你需要把旋转添加到活动规则中。这样，无论状态如何，按钮都会旋转。你能为它创建任何小提琴吗？？如果我按照您的建议更改代码，则放大和缩小效果不起作用，这将有助于解决此问题。@DKBHOI您是什么意思？您想在没有jQuery的情况下完成它吗？这让它变得更难了tho:P