Javascript 字体和后卡动画与CSS

我正试图开发一些动画效果我的网页，我有三个正面和背面翻转动画效果卡。现在我正在寻找正面和背面的动画效果，我在下图中已经清楚地描述了这一点

前后动画之前的图像（最初）

点击card-2后的图像

示例：

var accHD=document.getElementsByClassName（'card'）；
var showNotificationBtn=document.getElementsByClassName（'showsettingsbutton'）；
对于（i=0；i

.card{
填充：30px；
背景：#fff；
/*盒影：0 4px 8px 0 rgba（0,0,0,0.2）*/
过渡：0.3s；
宽度：10%；
z指数：1；
}
.集装箱{
填充：2x16px；
}
卡德尔先生{
填充：30px；
背景：#fff；
过渡：0.3s；
宽度：10%；
-moz转换：全部2；-webkit转换：全部2；-o转换：
所有2；过渡：所有2；
z指数：2；
-webkit转换：所有2；
-o-过渡：所有2s；
过渡：所有2；
}
/*卡片设计到此结束*/
/*翻转设计从这里开始*/
.翻转容器{
透视图：1000px；
}
/*悬停时翻转窗格
.flip容器：悬停.flipper、.flip-container.hover.flipper{
变换：旋转（180度）；
}
*/
.弗利佩罗泰恩{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
变换：旋转（180度）；
}
/*翻转速度在这里*/
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
}
/*交换期间隐藏窗格的背面*/
.前面，.后面{
背面可见性：隐藏；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
位置：绝对位置；
排名：0；
左：0；
}
/*前窗格，置于后上方*/
.前线{
z指数：2；
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（180度）；
}
/*翻转设计到此结束*/
/*显示通知按钮的设计从这里开始*/
.显示设置按钮{
边界：0；
背景#0087cc；
边界半径：4px；
盒影：0 5px 0#006599；
颜色：#fff；
光标：指针；
字体：继承；
保证金：0；
大纲：0；
填充：12px 20px；
过渡：所有。1s线性；
}
.显示设置按钮：激活{
盒影：0 2px 0#006599；
转换：translateY（3px）；
}

警报设置
设置说明

显示设置
警报设置
设置说明

电子邮件
警报设置
设置说明

显示设置
返回
警报设置
设置说明

显示设置
警报设置
设置说明

你在问什么？您卡在哪里？Javascript错误：

accHD未定义

。accHD已定义，现在我在单击任何卡时更新了上面的代码，单击的卡位于前面，宽度增加，其他卡位于该卡的后面（即单击的卡），如循环旋转。