html - 六边形的 Sass/CSS 折叠三 Angular 形

Question

我正在尝试在由三 Angular 形组成的六边形中创建折叠效果。到目前为止，我只设法使三 Angular 形平移而不是折叠。我要制作

这个http://jsfiddle.net/zn6jbhr6/

相关SCSS

@mixin hexTranslateKeyFrames($name, $degree) {
  @keyframes #{$name} {
    @content;
  }
}

$hex-degree: 0deg;
@for $idx from 1 through 6 {
  $hex-degree: $hex-degree + 60;

  @include hexTranslateKeyFrames(hexTranslate#{$idx}, $hex-degree) {
    0% { transform: rotateZ(0deg) rotate($hex-degree); }
    54.55%, 100% { transform: rotateZ(360deg) rotate($hex-degree); }
  }
}

$order2: (0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s);
.folding-hex {
  @include hexagon();

  @for $i from 1 through 6 {
    .triangle:nth-child(#{$i}) {
      animation: hexTranslate#{$i} 2.2s infinite #{nth($order2, $i)} linear;
    }
  }
}

更多类似内容 http://jsfiddle.net/wvm15yL4/

相关的 CSS

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1); 
}
.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both;
          animation: sk-foldCubeAngle 2.4s infinite linear both;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
  -webkit-transform: scale(1.1) rotateZ(90deg);
          transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
  -webkit-transform: scale(1.1) rotateZ(180deg);
          transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
  -webkit-transform: scale(1.1) rotateZ(270deg);
          transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube2:before {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s; 
}
.sk-folding-cube .sk-cube4:before {
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
}
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}

Answer 1

您需要创建一个在 3D 中旋转的动画。

因为有点难，所以我只做了一次，然后在DOM中设置一个中间元素在平面上旋转

rotate3D 中的前两个参数是 sin(60deg) 和 cos(60deg)，使旋转轴处于 60 度

@keyframes flip {
   0%       { transform: rotate3d( 0.5, 0.866, 0,  90deg); 
              opacity: 0;}
   0.1%     { transform: rotate3d( 0.5, 0.866, 0,  90deg); 
              opacity: 1;}
  14%       { transform: rotate3d( 0.5, 0.866, 0,   0deg); }
  50%       { transform: rotate3d(-0.5, 0.866, 0,   0deg); }
  63.99%    { transform: rotate3d(-0.5, 0.866, 0, -90deg); 
              opacity: 1;}
  64%, 100% { transform: rotate3d(-0.5, 0.866, 0, -90deg); 
              opacity: 0}
}

.folding-hex {
  height: 69.28px;
  width: 80px;
  position: relative;
  margin: 0 auto;
  transform-origin: 0 0;
  transform: translateX(40px) rotate(30deg); }

.rotator {
    transform-origin: 20px 37.64px;

}
.rotator:nth-child(1) {
    transform: rotate(0deg); 
}
.rotator:nth-child(2) {
    transform: rotate(60deg); 
}
.rotator:nth-child(3) {
    transform: rotate(120deg); 
}
.rotator:nth-child(4) {
    transform: rotate(180deg); 
}
.rotator:nth-child(5) {
    transform: rotate(240deg); 
}
.rotator:nth-child(6) {
    transform: rotate(300deg); 
}
  
.triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 34.64px 20px 0;
    transform-origin: 20px 37.64px;
    border-color: #E50C4E transparent; 
    animation: flip 3s linear infinite;
}

.rotator:nth-child(2) .triangle {
    border-color: #b5093d transparent; 
    animation-delay: -2.5s;
}
.rotator:nth-child(3) .triangle {
    border-color: #b5093d transparent; 
    animation-delay: -2.0s;
}
.rotator:nth-child(4) .triangle {
    animation-delay: -1.5s;
}

.rotator:nth-child(5) .triangle {
    border-color: #f8799f transparent; 
    animation-delay: -1.0s;
}
.rotator:nth-child(6) .triangle {
    border-color: #f8799f transparent; 
    animation-delay: -0.5s;
}

<div class="folding-hex">
  <div class="rotator">
    <div class="triangle"></div>
  </div>
  <div class="rotator">
    <div class="triangle"></div>
  </div>
  <div class="rotator">
    <div class="triangle"></div>
  </div>
  <div class="rotator">
    <div class="triangle"></div>
  </div>
  <div class="rotator">
    <div class="triangle"></div>
  </div>
  <div class="rotator">
    <div class="triangle"></div>
  </div>
</div>