展开不同形状和大小的三角形?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了展开不同形状和大小的三角形?相关的知识,希望对你有一定的参考价值。

我正在尝试使用CSS3创建一个展开的动画。

基本上,我试图在另一个之后展开3个三角形,并且三角形具有不同的尺寸和形状,但它们都制作一个图像。

我不确定这是否可能,但到目前为止我已经想出了这个:

http://jsfiddle.net/wvm15yL4/27/

这个我smy代码:

@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;
}

正如你所看到的,它目前是动画的,但它并没有真正展开三角形。

有人可以就此事提出建议吗?

提前致谢。

编辑:

基本上,尝试展开这样的三角形:

http://jsfiddle.net/wvm15yL4/28/

答案

您可以尝试使用SVG来定义三角形并使用较少的代码,然后根据需要调整转换属性。

这是一个简化的例子,悬停到展开:

.unfold {
  margin: 150px;
  position: relative;
  width:100px;
}
.unfold svg {
  position:absolute;
  bottom:0;
  stroke:blue;
  stroke-width:2px;
  fill:transparent;
  transform-origin:bottom;
  transform:skewY(-10deg);
  transition:1s all;
}
.unfold svg:last-child {
  transform:skewY(-10deg) rotateX(45deg);
}
.unfold:hover svg:first-child {
  transform-origin:bottom;
  transform:skewY(-10deg) rotateX(-140deg);
}
<div class="unfold">
  <svg viewBox="0 0 100 100" ><polygon points="2 2,2 98,98 98" /></svg>
  <svg viewBox="0 0 100 100" ><polygon points="98 2,2 98,98 98" /></svg>
</div>

以上是关于展开不同形状和大小的三角形?的主要内容,如果未能解决你的问题,请参考以下文章

根据值更改散点图中特定点的形状

不同形状的OpenGL glDrawArrays

数学意义上的四维正五面体在三维上展开有几种立体形状?

如何在 HTML 的图例中指定不同的形状?

如何改变echart柱状图形状 矩形改为三角形

如何在 C# 中旋转二维对象