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

Question

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

所以，基本上，我希望 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

use css attribute 'transform':

.your-class:hover {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transition: transform 0.8s ease;
  -webkit-transition: -webkit-transform 0.8s ease;
  -moz-transition: -moz-transform 0.8s ease;
  -o-transition: -o-transform 0.8s ease;
}

Answer 2

我想这就是您想要的。

查看 link 以获取有意义的代码。

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

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

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

Rotating a div from the top left, transform-origin isn't working

html

css

css-transforms