Javascript 如何仅旋转单击的元素？

所以我有六个

#card

元素，每个元素内部都有一个

.content

元素，当点击

#card

时，该元素应该会旋转。但是问题是，当我单击

#卡时，
.content
的所有六个实例都会旋转

我只想在点击的
#卡片
中旋转
.content
的实例

下面是导致该问题的jQuery：

var rotated = false;
$('#card').click(function(){
    if(!rotated){
        $('.content').css({
            "transform": "rotateX(180deg)"
        });
        rotated = true; 
    }else{
        $('.content').css({
            "transform": "rotateX(0deg)"
        });
        rotated = false;
    }
});

我尝试了这个方法来修复它，但没有效果：

var rotated = false;
$('#card').click(function(){
    if(!rotated){
        $(this + '.content').css({
            "transform": "rotateX(180deg)"
        });
        rotated = true; 
    }else{
        $(this + '.content').css({
            "transform": "rotateX(0deg)"
        });
        rotated = false;
    }
});

有没有简单的解决办法？我对jQuery还不熟悉，不知道语法的完整范围。
更改

$(this + '.content').css({

将来

切换类要容易得多：


$（“.card”）。单击（函数（）{
$（this.find（“.content”）.toggleClass（“旋转”）；
});
.card{
显示：内联块；
}
.内容{
背景：rgb（15,33155）；
背景：线性梯度（向右，rgba（15,33,155,1）0%，rgba（255,26,85,1）99%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#0f219b'，endColorstr='#ff1a55'，GradientType=1）；
颜色：白色；
高度：40px；
宽度：40px；
变换：旋转（0度）；
过渡：全部。3秒轻松；
}
.轮换{
变换：rotateX（180度）
}

1.
2.
3.
4.
5.
6.
“我有六个卡元素”ID在文档中必须是唯一的。将类用于您拥有多个类的任何对象。
$(this).find(".content").css({