使用CSS和JQuery动画六边形

Question

我使用3个div和边框颜色和大小创建了一个CSS六边形。我希望通过在它的x轴上翻转它来获得六角形的动画，然后像下面的代码那样获得一个新的css六边形。

这一切都适用于CSS。但后来我希望新的div在翻转后缩放到2倍。

CSS转换属性可以同时执行所有操作，因此我尝试使用jQuery动画进行扩展。如果可能的话，我会愿意在jQuery中做所有事情。

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}
.hexagons {
  width: 1100px;
  letter-spacing: 0;
  font-size: 0;
  margin: 0 auto;
}
.hexagon-holder {
  position: relative;
  margin: 0 21.5px;
  width: 226px;
  height: 130.48px;
  display: inline-block;
  letter-spacing: 0;
  font-size: 0;
}
.hexagon {
  position: relative;
  width: 226px;
  height: 130.48px;
  background-image: url(http://csshexagon.com/img/meow.jpg);
  background-size: auto 258.6529px;
  background-position: center;
  border-left: solid 1px #333333;
  border-right: solid 1px #333333;
  display: inline-block;
  z-index: 1;
}
.hexagon .hexTop,
.hexagon .hexBottom {
  position: absolute;
  z-index: 1;
  width: 159.81px;
  height: 159.81px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 32.10px;
  -webkit-backface-visibility: hidden
}
/*counter transform the bg image on the caps*/

.hexagon .hexTop:after,
.hexagon .hexBottom:after {
  content: "";
  position: absolute;
  width: 224.0000px;
  height: 129.32646029847618px;
  -webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
  -ms-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
  transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}
.hexagon .hexTop {
  top: -79.9031px;
  border-top: solid 1.4142px #333333;
  border-right: solid 1.4142px #333333;
}
.hexagon .hexTop:after {
  background-position: center top;
}
.hexagon .hexBottom {
  bottom: -79.9031px;
  border-bottom: solid 1.4142px #333333;
  border-left: solid 1.4142px #333333;
}
.hexagon .hexBottom:after {
  background-position: center bottom;
}
.hexagon:after {
  content: "";
  position: absolute;
  top: 0.5774px;
  left: 0;
  width: 224.0000px;
  height: 129.3265px;
  z-index: 2;
  background: inherit;
}
.hexagon:nth-child(7n-2) {
  margin-left: 156px;
}
.hexagon:nth-child(n+5) {
  margin-top: 29px;
}
.hexText {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  color: #000;
  opacity: 1;
  font-size: 20px;
  text-align: center;
  width: 100%;
  color: #fff;
}
/* entire container, keeps perspective */

.flip-container {
  perspective: 1000;
  transform-style: preserve-3d;
  width: 226px;
  height: 280.48px !important;
  background: transparent;
}
/*  UPDATED! flip the pane when hovered */

.flip-container:hover .back {
  transform: rotateY(0deg);
}
.flip-container:hover .front {
  transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
  width: 226px;
  height: auto;
}
/* flip speed goes here */

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  top: 75px;
}
/* hide back of pane during swap */

.front,
.back {
  backface-visibility: hidden;
  transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}
/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
}
/* back, initially hidden pane */

.back {
  transform: rotateY(-180deg);
}
/* 
	Some vertical flip updates 
*/

.vertical.flip-container {
  position: relative;
}
.vertical .back {
  transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
  transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
  transform: rotateX(180deg);
}
.hexagon-overlay {
  position: absolute;
  width: 226px;
  height: 130.48px;
  margin: 0;
  background-color: teal;
  background-size: auto 247.1059px;
  background-position: center;
  border-left: solid 6px #333333;
  border-right: solid 6px #333333;
  opacity: .7;
  z-index: 3;
  top: 0;
  left: 0;
}
.hexagon-overlay .hexTop,
.hexagon-overlay .hexBottom {
  position: absolute;
  z-index: 1;
  width: 159.81px;
  height: 159.81px;
  overflow: hidden;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background: inherit;
  left: 27.10px;
}
/*counter transform the bg image on the caps*/

.hexagon-overlay .hexTop:after,
.hexagon-overlay .hexBottom:after {
  content: "";
  position: absolute;
  width: 214.0000px;
  height: 123.55295760657991px;
  -webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
  -ms-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
  transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  background: inherit;
}
.hexagon-overlay .hexTop {
  top: -79.9031px;
  border-top: solid 8.4853px #333333;
  border-right: solid 8.4853px #333333;
}
.hexagon-overlay .hexTop:after {
  background-position: center top;
}
.hexagon-overlay .hexBottom {
  bottom: -79.9031px;
  border-bottom: solid 8.4853px #333333;
  border-left: solid 8.4853px #333333;
}
.hexagon-overlay .hexBottom:after {
  background-position: center bottom;
}
.hexagon-overlay .hexagon:after {
  content: "";
  position: absolute;
  top: 3.4641px;
  left: 0;
  width: 214.0000px;
  height: 123.5530px;
  z-index: 2;
  background: inherit;
}

＆＃13;

<div class="hexagons">
  <div class="hexagon-holder flip-container" ontouchstart="this.classList.toggle('hover');">>
    <div class="flipper">
      <div class="front">
        <div class="hexagon">
          <div class="hexTop"></div>
          <div class="hexBottom"></div>
        </div>
      </div>
      <div class="back">
        <div class="hexagon-overlay">
          <div class="hexTop"></div>
          <div class="hexBottom"></div>
        </div>
        <div class="hexText">LifePoint Dental
          <br />+</div>
        <div class="hexagon" style="transform:scaleX(-1);">
          <div class="hexTop"></div>
          <div class="hexBottom"></div>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

查看Codepen