如何使用css3 / canvas旋转六边形跟随边缘

Question

我想要旋转六边形，但不知道如何......

感谢你帮助我！

Answer 1

这实际上是通过缩放而不是旋转来完成的。

如果您从这张图片开始：

然后将其宽度缩放到原始宽度的50％，您可以得到：

这里有关于如何将宽度缩放到50％的代码：

// move the canvas origin(0,0) to the center of the canvas

ctx.translate(canvas.width/2,canvas.height/2);

// scale the width to 50% of its original width

ctx.scale(0.50,1);

// finally draw the image, which will be scaled in width

ctx.drawImage(img,-img.width/2,-img.height/2);

所以要创造你的效果：

• 将橙色和紫色六边形缩放至50％宽度
• 将它们拉近彼此
• 在另外2个六边形上绘制金色六边形

Answer 2

我问你，你使用纯CSS3或jquery你没有重播..

我正在考虑你使用纯css3检查它

jsfiddle

HTML代码 -

<div class="hexagon-small" id="first"></div>
<div class="hexagon-big" id="second"></div>
<div class="hexagon-small" id="third"></div>

及其CSS

#first
{
    left:0px;
}
#second
{
    left:-53px;    
}

#third
{
    left:-106px;
}
.hexagon-small {
    width: 50px;
    height: 55px;
    background: black;
    position: relative;
    display:inline-block;
    top:25px;
    z-index:50;
}
.hexagon-small:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 25px solid black;
}
.hexagon-small:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid black;
}


.hexagon-big {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    display:inline-block;
    top:25px;
    z-index:100;
}
.hexagon-big:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
.hexagon-big:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}