时间戳

首页 > 解决方案 > 调整平移和旋转元素的大小时如何计算顶部和左侧

html - 调整平移和旋转元素的大小时如何计算顶部和左侧

问题描述

我有一个可以拖动和调整 DIV 大小的系统。您可以从顶部抓取，它会从底部生长。从底部抓起，它从顶部向下生长。与左、右和角相同。

这一切都是通过 CSS 宽度/高度和 translate(x,y) 完成的，并且效果很好。

现在我正在添加旋转并使用这样的东西：

style="transform: translate(100px,100px) rotate(-30deg);width:100px;height:50px;"

同样，这一切都很好。

但是当我改变宽度或高度时，元素会向上/向下或向左/向右移动。

请参阅以下内容。绿色的 div 是原始的，红色的 div 扩展了宽度。你可以看到它是如何变化的。

<html>
  <head>
    <style>
        body {
            position: relative;
        }

        .thing {
            position:absolute;
            border: solid 1px #0f0;
            transform: translate(100px, 100px) rotate(-30deg);
        }

        .thing2 {
            position:absolute;
            border: solid 1px #f00;
            transform: translate(100px, 100px) rotate(-30deg);
        }
    </style>
  </head>

  <body>
    <div class="thing" style="width:100px;height:50px;"></div>
    <div class="thing2" style="width:150px;height:50px;"></div>
  </body>
</html>

我知道我需要根据 trig 重新计算顶部/左侧，但还没有找到正确的计算来使其工作。

另外，我想保持围绕中心的旋转枢轴，所以我不能只将枢轴点更改为其中一个角。

标签： htmltrigonometrycss-transforms

解决方案

这里有一个包装器的解决方案

<div class="thing-wrapper">
  <div class="thing left-top">expand right</div>
</div>

<div class="thing-wrapper">
  <div class="thing right-top">expand left</div>
</div>

<div class="thing-wrapper">
  <div class="thing left-bottom">expand top</div>
</div>

<div class="thing-wrapper">
  <div class="thing right-bottom">expand bottom</div>
</div>

.thing-wrapper {
  position: absolute;
}

.thing {
  border: solid 1px #0f0;
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translate(100px, 100px) rotate(-44deg);
  transition: 2s;
}

.thing.expand-left:hover,
.thing.expand-right:hover{
  width: 200px !important;
  height: 100px !important;
}

.thing.expand-top:hover,
.thing.expand-bottom:hover{
  width: 100px !important;
  height: 200px !important;
}

.expand-left {
  left: 0;
  top: 0;
  transform-origin: left top;
}

.expand-right {
  right: 0;
  top: 0;
  transform-origin: right top;
}

.expand-top {
  left:0;
  bottom: 0;
  transform: translate(300px, 300px) rotate(-44deg);
  transform-origin: left bottom;
}

.expand-bottom {
  left: 0;
  right: 0;
  transform: translate(300px, 300px) rotate(-44deg);
  transform-origin: left top;
}

https://jsfiddle.net/dt7phfk9/32/

将事物定位在包装器中仅用于向一个方向扩展。

推荐阅读