Javascript 使用CSS和JQuery制作六边形动画

我创建了一个CSS六边形使用3个div和边框颜色和大小。我想通过在x轴上翻转六边形并获得一个新的css六边形来设置该六边形的动画，如下面的代码所示

这一切都在CSS中工作。但是，我希望新的div在翻转后缩放到2倍

CSS transform属性一次完成所有操作，因此我尝试使用jQuery animate进行缩放。如果可能的话，我愿意在jQuery中做任何事情

*{
框大小：边框框；
}
.六边形{
宽度：1100px；
字母间距：0；
字号：0；
保证金：0自动；
}
.六角支架{
位置：相对位置；
利润率：0.21.5px；
宽度：226px；
高度：130.48px；
显示：内联块；
字母间距：0；
字号：0；
}
.六边形{
位置：相对位置；
宽度：226px；
高度：130.48px；
背景图片：url(http://csshexagon.com/img/meow.jpg);
背景尺寸：自动258.6529px；
背景位置：中心；
左边框：实心1px#333333；
右边框：实心1px#333333；
显示：内联块；
z指数：1；
}
.六边形.六边形，
.六边形.六边形底部{
位置：绝对位置；
z指数：1；
宽度：159.81px；
高度：159.81px；
溢出：隐藏；
-webkit变换：scaleY（0.5774）旋转（-45度）；
-ms变换：scaleY（0.5774）旋转（-45度）；
变换：scaleY（0.5774）旋转（-45度）；
背景：继承；
左：32.10px；
-webkit背面可见性：隐藏
}
/*计数器转换caps上的bg图像*/
.六边形.六边形：在，
.六边形.六边形底部：后{
内容：“；
位置：绝对位置；
宽度：224.0000px；
高度：129.32646029847618px；
-webkit变换：旋转（45度）缩放（1.7321）平移（-64.6632px）；
-ms变换：旋转（45度）缩放（1.7321）平移（-64.6632px）；
变换：旋转（45度）缩放（1.7321）平移（-64.6632px）；
-webkit转换原点：0；
-ms变换原点：0；
变换原点：0；
背景：继承；
}
.六角头{
顶部：-79.9031px；
边框顶部：实心1.4142px#333333；
右边框：实心1.4142px#333333；
}
.六边形{
背景位置：中上；
}
.六边形.六边形底部{
底部：-79.9031px；
边框底部：实心1.4142px#333333；
左边框：实心1.4142px#333333；
}
.六边形.六边形底部：后{
背景位置：中底；
}
.六边形：之后{
内容：“；
位置：绝对位置；
顶部：0.5774px；
左：0；
宽度：224.0000px；
高度：129.3265px；
z指数：2；
背景：继承；
}
.六边形：第n个孩子（7n-2）{
左边距：156px；
}
.六边形：第n个子（n+5）{
边缘顶端：29px；
}
.hexText{
位置：绝对位置；
左：0；
排名：0；
z指数：3；
颜色：#000；
不透明度：1；
字体大小：20px；
文本对齐：居中；
宽度：100%；
颜色：#fff；
}
/*整个容器，保持透视*/
.翻转容器{
前景：1 000；
变换样式：保留-3d；
宽度：226px；
高度：280.48px！重要；
背景：透明；
}
/*更新！悬停时翻转窗格*/
.flip容器：悬停。返回{
变换：旋转（0度）；
}
.翻转容器：悬停。前{
变换：旋转（180度）；
}
.翻转容器，
.前线，
.回来{
宽度：226px；
高度：自动；
}
/*翻转速度在这里*/
.鳍状肢{
过渡：0.6s；
变换样式：保留-3d；
位置：相对位置；
顶部：75px；
}
/*交换期间隐藏窗格的背面*/
.前线，
.回来{
背面可见性：隐藏；
过渡：0.6s；
变换样式：保留-3d；
位置：绝对位置；
排名：0；
左：0；
}
/*更新！前窗格，置于后上方*/
.前线{
z指数：2；
变换：旋转（0度）；
}
/*背面，最初隐藏的窗格*/
.回来{
变换：旋转（-180度）；
}
/* 
一些垂直翻转更新
*/
.垂直翻转容器{
位置：相对位置；
}
.垂直，向后{
变换：rotateX（180度）；
}
.垂直.翻转容器：悬停.返回{
变换：旋转（0度）；
}
.垂直。翻转容器：悬停。前{
变换：rotateX（180度）；
}
.六边形覆盖层{
位置：绝对位置；
宽度：226px；
高度：130.48px；
保证金：0；
背景色：青色；
背景尺寸：自动247.1059px；
背景位置：中心；
左边框：实心6px#333；
右边框：实心6px#333；
不透明度：.7；
z指数：3；
排名：0；
左：0；
}
.六边形覆盖层.六边形顶部，
.六边形覆盖层.六边形底部{
位置：绝对位置；
z指数：1；
宽度：159.81px；
高度：159.81px；
溢出：隐藏；
-webkit变换：scaleY（0.5774）旋转（-45度）；
-ms变换：scaleY（0.5774）旋转（-45度）；
变换：scaleY（0.5774）旋转（-45度）；
背景：继承；
左：27.10px；
}
/*计数器转换caps上的bg图像*/
.六边形覆盖层.六边形顶部：之后，
.六边形覆盖层.六边形底部：之后{
内容：“；
位置：绝对位置；
宽度：214.0000px；
高度：123.55295760657991px；
-webkit变换：旋转（45度）缩放（1.7321）平移（-61.7765px）；
-ms变换：旋转（45度）缩放（1.7321）平移（-61.7765px）；
变换：旋转（45度）缩放（1.7321）平移（-61.7765px）；
-webkit转换原点：0；
-ms变换原点：0；
变换原点：0；
背景：继承；
}
.六边形覆盖层.六边形顶部{
顶部：-79.9031px；
边框顶部：实心8.4853px#333333；
右边框：实心8.4853px#333333；
}
.六边形覆盖层.六边形顶部：之后{
背景位置：中上；
}
.六边形覆盖层.六边形底部{
底部：-79.9031px；
边框底部：实心8.4853px#333333；
左边框：实心8.4853px#333333；
}
.六边形覆盖层.六边形底部：之后{
背景位置：中底；
}
.六边形覆盖物.六边形：后{
内容：“；
位置：绝对位置；
顶部：3.4641px；
左：0；
宽度：214.0000px；
高度：123.5530px；
z指数：2；
背景：继承；
}

>
生命点牙科

+

css翻转代码：可能与我建议的doi重复