Я пытаюсь создать эффект складывания в шестиугольнике, состоящем из треугольников. До сих пор мне удалось преобразовать треугольники вместо складывания. Я хочу сделать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