0
我试图在由三角形组成的六边形中创建折叠效果。到目前为止,我只设法使三角形翻译而不是折叠。我要让Sass/CSS折叠三角形的三角形
这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;
}
}
看来对一些三角形时,他们折叠,有一个细线留下。也许这只是一个浏览器问题。有没有办法摆脱这一点? – tlaminator
我添加了不透明度和一些额外的框架,现在它应该可以在任何浏览器中使用。在90度时,它们不应该是可见的,但在某些情况下必定会有一些精确度损失 – vals