Sass/CSS摺疊三角形的三角形

Question

我試圖在由三角形組成的六邊形中創建摺疊效果。到目前爲止，我只設法使三角形翻譯而不是摺疊。我要讓

這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

你需要創建一個三維旋轉的動畫。

既然是有點硬，我已經做了只有一次，並再利用它爲在其它元件中，做旋轉在平面

第一2個參數在ROTATE3D的DOM設置的中間元件是罪（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>