在网格上旋转矩形元素90度

Question

我正在创建一个webapp,您可以将元素放在网格上,移动它们并旋转它们.

我遇到了关于元素旋转的问题,如果宽度是奇数而高度是偶数,反之亦然.

当围绕元素的中心旋转时,元素的新坐标将以两半结束.

当我使用jQuery向元素添加类时,旋转发生,并且实际旋转由CSS完成.

在"错误"旋转之后,我需要让元素与网格对齐.我怎样才能实现这一目标？

Answer 1

当您使用 CSS 旋转元素时，您还可以使用 transform origin 属性使矩形围绕网格节点之一旋转并保持对齐。对于 5*2 矩形的示例，变换原点应该是：

transform-origin: 40% 50%;

演示 （将鼠标悬停在矩形上以旋转它）

transform-origin: 40% 50%;

*{box-sizing:border-box;margin:0;padding:0;}
.b{
    float:left;
    width:9.5vw;
    height:9.5vw;
    background:#262C33;
    border:1px solid grey;
}

.r{
    position:absolute;
    left:19vw; top: 28.5vw;
    width:47.5vw; height:19vw;
    border:2px solid #fff;
}
.r:hover{
    transform-origin: 40% 50%;
    transform:rotate(90deg);
}