Question

我试图让一个物体沿弧线移动，为此我需要将transform-origin点设置为远离物体本身，然后rotate。因此，不是盲目地使用不同的长度移动transform-origin点，而是通过反复试验最终达到预期的结果，是否有办法让点可见以使过程更容易？

Answer 1

您可以使用CSS添加帮助程序。只需将以下代码段添加到您将transform-origin属性设置为的元素，其中transform-origin的x值与助手的左值相同，y值与top值相同。

.foo {
  position: relative;
  transform-origin: 0 100%;
}

.foo::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 5px;
  height: 5px;
  content: '';
  background-color: #f0f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

Answer 2

Here is a solution I use to visualize transform-origin. Try to change transform-origin value on a DIV element. You will see a semitransparent point adjusted. The drawback of this method is that you have to set position: relative to a parent element.

div {
  position: relative;
  margin: 100px;
  width: 40px;
  height: 30px;
  background: #ccc;
  transform-origin: bottom left;
  animation: rotate 1s linear infinite;
}

span {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(0.001);
  transform-origin: inherit;
}

span::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255,128,128,0.75);
  transform: scale(1000);
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div>
  <span></span>
</div>

transform-origin is necessary for scale and rotation transformations only. The meaning of it for scale is a point where an object is growing from (for scale-in) or a point where an object should be shrinked to (for scale-out). So, at first I shrink a SPAN to almost zero size, then I grow a semitransparent element (SPAN::AFTER) from this point.

https://codepen.io/vbarbarosh/pen/eaQLeJ

Answer 3

我对给出的答案不太满意，所以我尝试了以下方法：

HTML：


$ celery worker -A myemail.celery -l info

 -------------- celery@LAPTOP-ERVJPN6C v4.3.0 (rhubarb)
---- **** -----
--- * ***  * -- Windows-10-10.0.18362-SP0 2019-12-31 21:16:15
-- * - **** ---
- ** ---------- [config]
- ** ---------- .> app:         mailape:0x4275770
- ** ---------- .> transport:   redis://localhost:6379/0
- ** ---------- .> results:
- *** --- * --- .> concurrency: 8 (prefork)
-- ******* ---- .> task events: OFF (enable -E to monitor tasks in this worker)
--- ***** -----
 -------------- [queues]
                .> celery           exchange=celery(direct) key=celery


[tasks]
  . myemail.tasks.build_subscriber_messages_for_message
  . myemail.tasks.send_confirmation_email_to_subscriber

[2019-12-31 21:16:15,550: INFO/MainProcess] Connected to redis://localhost:6379/0
[2019-12-31 21:16:15,674: INFO/MainProcess] mingle: searching for neighbors
[2019-12-31 21:16:16,059: INFO/SpawnPoolWorker-3] child process 3424 calling self.run()
[2019-12-31 21:16:16,082: INFO/SpawnPoolWorker-1] child process 12424 calling self.run()
[2019-12-31 21:16:16,083: INFO/SpawnPoolWorker-8] child process 6588 calling self.run()
[2019-12-31 21:16:16,084: INFO/SpawnPoolWorker-5] child process 12500 calling self.run()
[2019-12-31 21:16:16,095: INFO/SpawnPoolWorker-4] child process 11624 calling self.run()
[2019-12-31 21:16:16,097: INFO/SpawnPoolWorker-2] child process 15152 calling self.run()
[2019-12-31 21:16:16,107: INFO/SpawnPoolWorker-7] child process 14932 calling self.run()
[2019-12-31 21:16:16,131: INFO/SpawnPoolWorker-6] child process 15224 calling self.run()
[2019-12-31 21:16:16,760: INFO/MainProcess] mingle: all alone
[2019-12-31 21:16:16,793: WARNING/MainProcess] c:\users\atom\projects\workbench\python\python workbench\myemail\env\lib\site-packages\celery\fixups\django.py:202: UserWarning: Using settings.DEBUG leads to a memory leak, never use this setting in production environments!
  warnings.warn('Using settings.DEBUG leads to a memory leak, never '
[2019-12-31 21:16:16,813: INFO/MainProcess] celery@LAPTOP-ERVJPN6C ready.

和CSS：

<div>
  <span class="x-axis"></span>
  <span class="y-axis"></span>
</div>

Codepen

主要思想是通过将这两个跨度放置在元素中来可视化任何元素的投影动画。测试期间应注释目标元素的内容。

Answer 4

默认情况下，变换的原点是“50％50％”，它恰好位于任何给定元素的中心。将原点更改为“左上角”（如上面的演示）会导致元素使用元素的左上角作为旋转点。

值可以是长度，百分比或关键字top，left，right，bottom和center。

第一个值是水平位置，第二个值是垂直位置，第三个值表示Z轴上的位置。第三个值仅在您使用3D变换时才有效，并且不能是百分比。

#div1 {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    
    border: 1px solid black;
}

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: #454545;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(40deg);
    transform-origin: 0px 0px; /* 0,0 indicates top left corner*/
}

<div id="div1">
  <div id="div2">HELLO</div>
</div>

进一步refrence

在CSS中可视化变换原点的任何方法？

4 个答案: