纯css实现三维空间飞舞的卡片动画效果-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：纯css实现三维空间飞舞的卡片动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap" rel="stylesheet">
<style>
body {
  -webkit-perspective: 180em;
          perspective: 180em;
}

#play {
  height: 95vh;
  width: 98vw;
  overflow: hidden;
}

#stage {
  width: 70%;
  margin-left: 15%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation-name: animate;
          animation-name: animate;
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

#stage .card {
  height: 200px;
  width: 129.87013px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: absolute;
  border-radius: 4px;
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  top: 120px;
}

#stage .card:nth-of-type(1) {
  -webkit-transform: translate3d(9.375em, 10.125em, -64.875em) rotate3d(2, -3, -3, 53deg);
          transform: translate3d(9.375em, 10.125em, -64.875em) rotate3d(2, -3, -3, 53deg);
}

#stage .card:nth-of-type(2) {
  -webkit-transform: translate3d(6.375em, 9.125em, -153.125em) rotate3d(1, -3, -4, 62deg);
          transform: translate3d(6.375em, 9.125em, -153.125em) rotate3d(1, -3, -4, 62deg);
}

#stage .card:nth-of-type(3) {
  -webkit-transform: translate3d(-79.375em, 9.375em, -76.875em) rotate3d(0, 0, -3, 216deg);
          transform: translate3d(-79.375em, 9.375em, -76.875em) rotate3d(0, 0, -3, 216deg);
}

#stage .card:nth-of-type(4) {
  -webkit-transform: translate3d(-13.625em, 0.875em, 45.875em) rotate3d(-1, -3, -3, 2deg);
          transform: translate3d(-13.625em, 0.875em, 45.875em) rotate3d(-1, -3, -3, 2deg);
}

#stage .card:nth-of-type(5) {
  -webkit-transform: translate3d(-65.875em, 3.875em, 54.125em) rotate3d(-2, 3, 3, 77deg);
          transform: translate3d(-65.875em, 3.875em, 54.125em) rotate3d(-2, 3, 3, 77deg);
}

#stage .card:nth-of-type(6) {
  -webkit-transform: translate3d(24.875em, 0.625em, 24.125em) rotate3d(3, -1, -2, 84deg);
          transform: translate3d(24.875em, 0.625em, 24.125em) rotate3d(3, -1, -2, 84deg);
}

#stage .card:nth-of-type(7) {
  -webkit-transform: translate3d(-65.625em, 6.875em, -8.375em) rotate3d(-4, 2, -4, 62deg);
          transform: translate3d(-65.625em, 6.875em, -8.375em) rotate3d(-4, 2, -4, 62deg);
}

#stage .card:nth-of-type(8) {
  -webkit-transform: translate3d(4.125em, 7.875em, -45.125em) rotate3d(-3, -1, -4, 40deg);
          transform: translate3d(4.125em, 7.875em, -45.125em) rotate3d(-3, -1, -4, 40deg);
}

#stage .card:nth-of-type(9) {
  -webkit-transform: translate3d(-1.875em, -6.625em, 25.375em) rotate3d(1, 0, 2, 276deg);
          transform: translate3d(-1.875em, -6.625em, 25.375em) rotate3d(1, 0, 2, 276deg);
}

#stage .card:nth-of-type(10) {
  -webkit-transform: translate3d(-42.875em, 11.625em, -59.375em) rotate3d(-4, 2, 0, 30deg);
          transform: translate3d(-42.875em, 11.625em, -59.375em) rotate3d(-4, 2, 0, 30deg);
}

#stage .card:nth-of-type(11) {
  -webkit-transform: translate3d(41.375em, -4.625em, 12.125em) rotate3d(1, 1, 0, 184deg);
          transform: translate3d(41.375em, -4.625em, 12.125em) rotate3d(1, 1, 0, 184deg);
}

#stage .card:nth-of-type(12) {
  -webkit-transform: translate3d(-98.625em, -5.625em, -25.375em) rotate3d(2, -4, 3, 190deg);
          transform: translate3d(-98.625em, -5.625em, -25.375em) rotate3d(2, -4, 3, 190deg);
}

#stage .card:nth-of-type(13) {
  -webkit-transform: translate3d(-36.125em, 9.625em, -75.875em) rotate3d(3, 0, 3, 321deg);
          transform: translate3d(-36.125em, 9.625em, -75.875em) rotate3d(3, 0, 3, 321deg);
}

#stage .card:nth-of-type(14) {
  -webkit-transform: translate3d(23.625em, 10.375em, -130.875em) rotate3d(1, -1, -1, 334deg);
          transform: translate3d(23.625em, 10.375em, -130.875em) rotate3d(1, -1, -1, 334deg);
}

#stage .card:nth-of-type(15) {
  -webkit-transform: translate3d(-48.875em, 5.125em, 36.625em) rotate3d(3, -2, 0, 14deg);
          transform: translate3d(-48.875em, 5.125em, 36.625em) rotate3d(3, -2, 0, 14deg);
}

#stage .card:nth-of-type(16) {
  -webkit-transform: translate3d(-45.125em, -7.875em, -107.375em) rotate3d(-4, -4, 3, 199deg);
          transform: translate3d(-45.125em, -7.875em, -107.375em) rotate3d(-4, -4, 3, 199deg);
}

#stage .card:nth-of-type(17) {
  -webkit-transform: translate3d(-83.125em, 3.875em, -28.125em) rotate3d(2, 2, 0, 208deg);
          transform: translate3d(-83.125em, 3.875em, -28.125em) rotate3d(2, 2, 0, 208deg);
}

#stage .card:nth-of-type(18) {
  -webkit-transform: translate3d(-17.625em, 0.625em, 0.125em) rotate3d(3, 2, -3, 219deg);
          transform: translate3d(-17.625em, 0.625em, 0.125em) rotate3d(3, 2, -3, 219deg);
}

#stage .card:nth-of-type(19) {
  -webkit-transform: translate3d(-13.375em, -4.875em, -55.125em) rotate3d(0, -3, 1, 267deg);
          transform: translate3d(-13.375em, -4.875em, -55.125em) rotate3d(0, -3, 1, 267deg);
}

#stage .card:nth-of-type(20) {
  -webkit-transform: translate3d(-130.875em, 10.875em, -66.125em) rotate3d(-1, 2, 0, 285deg);
          transform: translate3d(-130.875em, 10.875em, -66.125em) rotate3d(-1, 2, 0, 285deg);
}

#stage .card:nth-of-type(21) {
  -webkit-transform: translate3d(-95.625em, 4.625em, -54.125em) rotate3d(2, -4, -4, 44deg);
          transform: translate3d(-95.625em, 4.625em, -54.125em) rotate3d(2, -4, -4, 44deg);
}

#stage .card:nth-of-type(22) {
  -webkit-transform: translate3d(-150.375em, 7.375em, -16.375em) rotate3d(2, 1, -2, 241deg);
          transform: translate3d(-150.375em, 7.375em, -16.375em) rotate3d(2, 1, -2, 241deg);
}

#stage .card:nth-of-type(23) {
  -webkit-transform: translate3d(-144.375em, 13.875em, -117.625em) rotate3d(0, 2, 2, 35deg);
          transform: translate3d(-144.375em, 13.875em, -117.625em) rotate3d(0, 2, 2, 35deg);
}

#stage .card:nth-of-type(24) {
  -webkit-transform: translate3d(-56.125em, -5.625em, 38.625em) rotate3d(-4, 3, 2, 189deg);
          transform: translate3d(-56.125em, -5.625em, 38.625em) rotate3d(-4, 3, 2, 189deg);
}

#stage .card:nth-of-type(25) {
  -webkit-transform: translate3d(30.125em, 1.625em, -63.375em) rotate3d(-4, 2, 3, 261deg);
          transform: translate3d(30.125em, 1.625em, -63.375em) rotate3d(-4, 2, 3, 261deg);
}

#stage .card:nth-of-type(26) {
  -webkit-transform: translate3d(-94.875em, -6.875em, -72.375em) rotate3d(-1, 3, 1, 129deg);
          transform: translate3d(-94.875em, -6.875em, -72.375em) rotate3d(-1, 3, 1, 129deg);
}

#stage .card:nth-of-type(27) {
  -webkit-transform: translate3d(0.875em, 2.625em, 25.625em) rotate3d(1, -4, -2, 353deg);
          transform: translate3d(0.875em, 2.625em, 25.625em) rotate3d(1, -4, -2, 353deg);
}

#stage .card:nth-of-type(28) {
  -webkit-transform: translate3d(-2.625em, 8.125em, -118.125em) rotate3d(-4, -4, 3, 81deg);
          transform: translate3d(-2.625em, 8.125em, -118.125em) rotate3d(-4, -4, 3, 81deg);
}

#stage .card:nth-of-type(29) {
  -webkit-transform: translate3d(-78.875em, 8.625em, -25.875em) rotate3d(-2, -3, -4, 56deg);
          transform: translate3d(-78.875em, 8.625em, -25.875em) rotate3d(-2, -3, -4, 56deg);
}

#stage .card:nth-of-type(30) {
  -webkit-transform: translate3d(-42.375em, 13.875em, -44.875em) rotate3d(3, 1, -2, 255deg);
          transform: translate3d(-42.375em, 13.875em, -44.875em) rotate3d(3, 1, -2, 255deg);
}

#stage .card:nth-of-type(31) {
  -webkit-transform: translate3d(-56.375em, 14.375em, -50.875em) rotate3d(0, -4, -2, 336deg);
          transform: translate3d(-56.375em, 14.375em, -50.875em) rotate3d(0, -4, -2, 336deg);
}

#stage .card:nth-of-type(32) {
  -webkit-transform: translate3d(-55.375em, 13.375em, -13.125em) rotate3d(-1, -1, 0, 59deg);
          transform: translate3d(-55.375em, 13.375em, -13.125em) rotate3d(-1, -1, 0, 59deg);
}

#stage .card:nth-of-type(33) {
  -webkit-transform: translate3d(-137.625em, -5.375em, -56.625em) rotate3d(3, 2, -1, 83deg);
          transform: translate3d(-137.625em, -5.375em, -56.625em) rotate3d(3, 2, -1, 83deg);
}

#stage .card:nth-of-type(34) {
  -webkit-transform: translate3d(32.375em, 5.625em, -152.125em) rotate3d(0, 0, 3, 257deg);
          transform: translate3d(32.375em, 5.625em, -152.125em) rotate3d(0, 0, 3, 257deg);
}

#stage .card:nth-of-type(35) {
  -webkit-transform: translate3d(14.875em, 0.875em, 35.375em) rotate3d(-4, 0, -2, 316deg);
          transform: translate3d(14.875em, 0.875em, 35.375em) rotate3d(-4, 0, -2, 316deg);
}

#stage .card:nth-of-type(36) {
  -webkit-transform: translate3d(39.375em, 7.375em, 17.125em) rotate3d(-4, -3, 1, 311deg);
          transform: translate3d(39.375em, 7.375em, 17.125em) rotate3d(-4, -3, 1, 311deg);
}

#stage .card:nth-of-type(37) {
  -webkit-transform: translate3d(-121.875em, 7.125em, -143.125em) rotate3d(2, 2, 2, 31deg);
          transform: translate3d(-121.875em, 7.125em, -143.125em) rotate3d(2, 2, 2, 31deg);
}

#stage .card:nth-of-type(38) {
  -webkit-transform: translate3d(-113.625em, -7.375em, -107.875em) rotate3d(0, 0, 3, 135deg);
          transform: translate3d(-113.625em, -7.375em, -107.875em) rotate3d(0, 0, 3, 135deg);
}

#stage .card:nth-of-type(39) {
  -webkit-transform: translate3d(-27.875em, 14.625em, -81.375em) rotate3d(-2, -1, -1, 120deg);
          transform: translate3d(-27.875em, 14.625em, -81.375em) rotate3d(-2, -1, -1, 120deg);
}

#stage .card:nth-of-type(40) {
  -webkit-transform: translate3d(-133.375em, -7.625em, -87.875em) rotate3d(-4, -2, -4, 292deg);
          transform: translate3d(-133.375em, -7.625em, -87.875em) rotate3d(-4, -2, -4, 292deg);
}

#stage .card:nth-of-type(41) {
  -webkit-transform: translate3d(-147.875em, -7.625em, -50.875em) rotate3d(2, 1, 0, 157deg);
          transform: translate3d(-147.875em, -7.625em, -50.875em) rotate3d(2, 1, 0, 157deg);
}

#stage .card:nth-of-type(42) {
  -webkit-transform: translate3d(38.875em, 13.125em, -155.375em) rotate3d(2, 0, 0, 132deg);
          transform: translate3d(38.875em, 13.125em, -155.375em) rotate3d(2, 0, 0, 132deg);
}

#stage .card:nth-of-type(43) {
  -webkit-transform: translate3d(-51.875em, 5.875em, 45.125em) rotate3d(-3, 3, -3, 206deg);
          transform: translate3d(-51.875em, 5.875em, 45.125em) rotate3d(-3, 3, -3, 206deg);
}

#stage .card:nth-of-type(44) {
  -webkit-transform: translate3d(-96.375em, -3.875em, -148.875em) rotate3d(1, -3, -2, 278deg);
          transform: translate3d(-96.375em, -3.875em, -148.875em) rotate3d(1, -3, -2, 278deg);
}

#stage .card:nth-of-type(45) {
  -webkit-transform: translate3d(-73.875em, -0.125em, -146.375em) rotate3d(0, 0, 2, 12deg);
          transform: translate3d(-73.875em, -0.125em, -146.375em) rotate3d(0, 0, 2, 12deg);
}

#stage .card:nth-of-type(46) {
  -webkit-transform: translate3d(-42.375em, 11.875em, 27.875em) rotate3d(-1, -2, -3, 181deg);
          transform: translate3d(-42.375em, 11.875em, 27.875em) rotate3d(-1, -2, -3, 181deg);
}

#stage .card:nth-of-type(47) {
  -webkit-transform: translate3d(-146.625em, 9.875em, -119.625em) rotate3d(1, -1, 1, 38deg);
          transform: translate3d(-146.625em, 9.875em, -119.625em) rotate3d(1, -1, 1, 38deg);
}

#stage .card:nth-of-type(48) {
  -webkit-transform: translate3d(5.125em, 8.125em, -82.875em) rotate3d(2, 2, -4, 23deg);
          transform: translate3d(5.125em, 8.125em, -82.875em) rotate3d(2, 2, -4, 23deg);
}

#stage .card:nth-of-type(49) {
  -webkit-transform: translate3d(-20.625em, 1.375em, -123.875em) rotate3d(-1, 2, 1, 161deg);
          transform: translate3d(-20.625em, 1.375em, -123.875em) rotate3d(-1, 2, 1, 161deg);
}

#stage .card:nth-of-type(50) {
  -webkit-transform: translate3d(-6.125em, 4.875em, -154.125em) rotate3d(3, 2, 3, 64deg);
          transform: translate3d(-6.125em, 4.875em, -154.125em) rotate3d(3, 2, 3, 64deg);
}

#stage .card:nth-of-type(51) {
  -webkit-transform: translate3d(-105.375em, 6.875em, -128.125em) rotate3d(-2, -2, -2, 104deg);
          transform: translate3d(-105.375em, 6.875em, -128.125em) rotate3d(-2, -2, -2, 104deg);
}

#stage .card:nth-of-type(52) {
  -webkit-transform: translate3d(16.125em, 2.625em, 49.625em) rotate3d(1, -3, 3, 285deg);
          transform: translate3d(16.125em, 2.625em, 49.625em) rotate3d(1, -3, 3, 285deg);
}

#stage .card .front {
  position: relative;
  background-color: white;
  border: 1px solid #ddd;
}

#stage .card .front .shape {
  position: absolute;
  height: 100%;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#stage .card .front .shape::before {
  content: '';
  width: 89.56561px;
  height: 89.56561px;
  background-color: #641C29;
  margin: auto;
}

#stage .card .front .secondary-shape {
  width: 15px;
  height: 15px;
  background-color: #641C29;
}

#stage .card .front .top-shape {
  position: absolute;
  top: 4%;
  left: 4%;
  color: #641C29;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  font-size: 1.5em;
}

#stage .card .front .bottom-shape {
  position: absolute;
  bottom: 4%;
  right: 4%;
  color: #641C29;
  font-weight: bold;
  font-size: 1.5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

#stage .card.circle .shape::before {
  border-radius: 50%;
}

#stage .card.circle .secondary-shape {
  border-radius: 50%;
}

#stage .card.whot .shape {
  background-color: transparent;
  font-family: 'Berkshire Swash', cursive;
  color: #641C29;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 33px;
}

#stage .card.whot .shape .whot-font:first-of-type {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

#stage .card.whot .shape::before {
  display: none;
}

#stage .card.whot .secondary-shape {
  background-color: transparent;
  font-family: 'Berkshire Swash', cursive;
  font-size: 15px;
}

#stage .card.star .secondary-shape {
  margin-top: 6px;
  background-color: transparent;
  position: relative;
  background-color: transparent;
  color: #641C29;
  width: 0;
  height: 0;
  border-right: 11px solid transparent;
  border-bottom: 7.7px solid #641C29;
  border-left: 11px solid transparent;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}

#stage .card.star .secondary-shape div {
  font-size: 7px;
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
  margin-left: -3.5px;
  margin-top: 1.4px;
  position: relative;
  z-index: 90;
  color: white;
}

#stage .card.star .secondary-shape::before {
  border-bottom: 8.8px solid #641C29;
  border-left: 3.3px solid transparent;
  border-right: 4.4px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -4.95px;
  left: -7.15px;
  display: block;
  content: '';
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}

#stage .card.star .secondary-shape::after {
  position: absolute;
  display: block;
  color: #641C29;
  top: 0.33px;
  left: -11.55px;
  width: 0px;
  height: 0px;
  border-right: 11px solid transparent;
  border-bottom: 7.7px solid #641C29;
  border-left: 11px solid transparent;
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  content: '';
}

#stage .card.star .shape::before {
  display: none;
}

#stage .card.star .shape .star {
  position: relative;
  display: block;
  color: #641C29;
  background-color: transparent;
  width: 0px;
  height: 0px;
  border-right: 58.6586px solid transparent;
  border-bottom: 41.06102px solid #641C29;
  border-left: 58.6586px solid transparent;
  -webkit-transform: rotate(35deg);
          transform: rotate(35deg);
}

#stage .card.star .shape .star::before {
  border-bottom: 46.92688px solid #641C29;
  border-left: 17.59758px solid transparent;
  border-right: 23.46344px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -26.39637px;
  left: -38.12809px;
  display: block;
  content: '';
  -webkit-transform: rotate(-35deg);
          transform: rotate(-35deg);
}

#stage .card.star .shape .star::after {
  position: absolute;
  display: block;
  color: #641C29;
  top: 1.75976px;
  left: -61.59153px;
  width: 0px;
  height: 0px;
  border-right: 58.6586px solid transparent;
  border-bottom: 41.06102px solid #641C29;
  border-left: 58.6586px solid transparent;
  -webkit-transform: rotate(-70deg);
          transform: rotate(-70deg);
  content: '';
}

#stage .card.triangle .shape::before {
  content: '';
  width: 0;
  height: 0;
  background-color: transparent;
  border-left: 57.46466px solid transparent;
  border-right: 57.46466px solid transparent;
  border-bottom: 114.92932px solid #641C29;
  position: relative;
  top: -10%;
}

#stage .card.triangle .secondary-shape {
  width: 0;
  height: 0;
  border-left: 7.5px solid transparent;
  border-right: 7.5px solid transparent;
  border-bottom: 15px solid #641C29;
  background-color: transparent;
}

#stage .card.cross .shape::before {
  height: 96.2001px;
  width: 46.54843px;
}

#stage .card.cross .shape::after {
  height: 46.54843px;
  width: 96.2001px;
  background-color: #641C29;
  content: '';
  position: absolute;
  top: calc(50% - 23.27422px);
  left: calc(50% - 48.10005px);
}

#stage .card.cross .secondary-shape {
  width: calc(15px / 3.2);
  position: relative;
}

#stage .card.cross .secondary-shape::before {
  content: '';
  display: block;
  position: absolute;
  width: 15px;
  left: calc(50% - 7.5px);
  top: calc(50% - (15px / 3.2) / 2);
  height: calc(15px / 3.2);
  background-color: #641C29;
}

#stage .card .face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

#stage .card .back {
  background-color: #641C29;
  border: 1px solid #ddd;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
  z-index: 99;
  font-family: 'Berkshire Swash', cursive;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 33px;
  color: white;
}

#stage .card .back::before {
  content: 'Whot';
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

#stage .card .back::after {
  content: 'Whot';
}

@-webkit-keyframes animate {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }
}

@keyframes animate {
  from {
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
  }
  to {
    -webkit-transform: rotateY(-360deg);
            transform: rotateY(-360deg);
  }
}
/*# sourceMappingURL=index.css.map */
</style>

</head>
<body translate="no">
<div id="play">
<div id="stage">
<div class="card circle">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">1
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">1
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"></div>
</div>
<div class="card square">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">1
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">1
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"> </div>
</div>
<div class="card cross">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">1
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">1
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"> </div>
</div>
<div class="card triangle">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">1
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">1
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"> </div>
</div>
<div class="card circle">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">2
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">2
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"></div>
</div>
<div class="card square">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">2
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">2
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"> </div>
</div>
<div class="card cross">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">2
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">2
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"> </div>
</div>
<div class="card triangle">
<div class="front face">
<div class="shape"></div>
<div class="top-shape">2
<div class="secondary-shape"></div>
</div>
<div class="bottom-shape">2
<div class="secondary-shape"></div>
</div>
</div>
<div class="back face"> </div>
</div>
<div class="card circle">
<div class="front face">
<div class="shape"></div>
<div clas.........完整代码请登录后点击上方下载按钮下载查看