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

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

Answer 2

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

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

2 个答案: