html - 从左上角旋转一个 div，transform-origin 不起作用

Question

我正在尝试模拟从介词 div 的右下角旋转的 n 个盒子。

所以，基本上，我希望 n 的左上角绝对位置与 n - 1 的右下角绝对位置相同。我真的希望我解释得足够好，我只是不希望有间隙，并且希望盒子从左上角旋转而不是向右或向下移动。

我尝试添加 transform-origin: 0 0; 但它仍然不起作用。

非常感谢您的帮助，在此先感谢您。

这是 CSS:

.con {
  margin: 50px;
  width: 100px;
  clear: both;
  position: relative;
}

.box:nth-child(5) {
  width: 150px;
  height: 150px;
  outline: 1px solid black;
  margin-left: -15px;
  margin-top: -15px;
  position: absolute;
  transform-origin: 0 0;
  transform: translate(140px, 140px) rotate(10deg);
}

.box:nth-child(4) {
  width: 120px;
  height: 120px;
  outline: 1px solid black;
  margin-left: 138px;
  margin-top: 138px;
  position: absolute;
  transform-origin: 0 0;
  transform: translate(110px, 110px) rotate(10deg);
}

.box:nth-child(3) {
  width: 90px;
  height: 90px;
  outline: 1px solid black;
  margin-left: 261px;
  margin-top: 261px;
  position: absolute;
  transform-origin: 0 0;
  transform: translate(80px, 80px) rotate(10deg);
}

.box:nth-child(2) {
  width: 60px;
  height: 60px;
  outline: 1px solid black;
  margin-left: 354px;
  margin-top: 354px;
  position: absolute;
  transform-origin: 0 0;
  transform: translate(50px, 50px) rotate(10deg);
}

.box:nth-child(1) {
  width: 30px;
  height: 30px;
  outline: 1px solid black;
  margin-left: 417px;
  margin-top: 417px;
  position: absolute;
  transform-origin: 0 0;
  transform: translate(20px, 20px) rotate(10deg);
}

和 HTML

<div class='con'>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
  <div class='box'></div>
</div>

这是现在的样子:

这里是 codepen您可以在其中实时查看沙箱。

Answer 1

我想这就是您想要的。

查看代码链接。

http://codepen.io/anon/pen/bppRBx?editors=1111

.con {
      margin: 50px;
      width: 100px;
      clear: both;
      position: relative;
    }

.box:nth-child(5) {
  width: 150px;
  height: 150px;
  outline: 1px solid black;
  margin-left: 0px;
  margin-top: 0px;
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(0deg);
}

.box:nth-child(4) {
  width: 120px;
  height: 120px;
  outline: 1px solid black;
  margin-left: 149.99962px;
  margin-top: 149.99962px;
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-10deg);
}

.box:nth-child(3) {
  width: 90px;
  height: 90px;
  outline: 1px solid black;
  margin-left: 289.01398px;
  margin-top: 247.33853px;
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-20deg);
}

.box:nth-child(2) {
  width: 60px;
  height: 60px;
  outline: 1px solid black;
  margin-left: 404.36784px;
  margin-top: 301.12891px;
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-30deg);
}

.box:nth-child(1) {
  width: 30px;
  height: 30px;
  outline: 1px solid black;
  margin-left: 486.32916px;
  margin-top: 323.09038px;
  position: absolute;
  transform-origin: 0 0;
  transform: rotate(-40deg);
}

要计算每个新矩形的起点，您需要使用一些三 Angular 函数来计算最后一个矩形的终点位置。由于这不包含在 SASS/CSS 中，因此您必须编写自己的函数。 Daniel Perez Alvarez 写了一篇关于如何在 SASS 中创建 COS/SIN 函数的简化版本的精彩博文: https://unindented.org/articles/trigonometry-in-sass/