使 div 旋转，但保持其内容固定-解网

问：

我正在尝试做一个箭头来指向一个由游戏手柄选择的方向。我是这样设计我的箭头的样式的：我的箭头的屏幕，因为图像胜过 1000 个单词

当操纵杆给出一个角度时，一切都以这个角度旋转（应用于类）。因此，黑色三角形的尖端指向一个方向。很漂亮，不是吗？:Drotatecircle

但是你可以看到一个数字，在中间。这是一个重要的信息（我通过TCP发送的PWM设置，但不是这里的主题），我希望它位于圆圈的中心......风格？

我的问题是：我用一个弹性框将这个数字居中，然后，当所有圆圈都在旋转时，这个数字也在旋转！太丑了！我怎样才能避免这种情况？:(

请在下面找到 CSS 和 HTML：

                <div class="cercle" id="fleche">
                    <div class="middle">
                        <p id="vitesse">1306</p>
                    </div>
                    <div class="triangle">
    
                    </div>
                </div>

            .cercle {
                order:0;
                border-radius: 50%;
                height: 80%;
                aspect-ratio: 1/1;
                background: linear-gradient(45deg, pink, red);
                display: flex;
                rotate: 0deg;
                transition: 350ms;

                .middle{
                    border-radius: 50%;
                    height: 92%;
                    width: 92%;
                    background-color: black;
                    align-self: center;
                    margin: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;

                }   

                .triangle {
                    width: 0px;
                    border-style: solid;
                    border-width: 20px;
                    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) black rgba(0, 0, 0, 0) ;
                    margin-left: 44.4%;
                    margin-top: -7.2%;
                    background: rgba(0, 0, 0, 0);
                    position: absolute;
                }

                #vitesse{
                    /*...*/
                }
            }

你可能猜到了，没有关键问题，只有美学问题。我试图对这个数字应用相反的旋转，但结果并不令人满意（看起来像“剪裁”。我认为最好的选择是禁止数字轮换......通过让它脱离圈子？但是如果我想让数字动态地保持在圆圈的中心，我必须把它放在里面。

感谢您的帮助！

HTML 弹性框 CSS 动画

一个简单的解决方法就是将文本旋转到圆圈旋转的负量。因此，如果操纵杆的输入为 80 度，则将 #vitesse 旋转 -80 度。
第一种方法可以正常工作，但最好将层次结构设置为更能指示正在发生的事情。我会将旋转元素与非旋转元素分开，这样它就不会成为它们的父元素，因此当它旋转时，它不会旋转其他任何东西

0赞 Nadir Mohammed Chrair 11/7/2023 #2

你可以写这个

`.cercle {
  order: 0;
  border-radius: 50%;
  height: 80%;
  aspect-ratio: 1/1;
  background: linear-gradient(45deg, pink, red);
  display: flex;
  transform: rotate(30deg); /* Rotate the .cercle element */
  transition: 350ms;
}

.middle {
  border-radius: 50%;
  height: 92%;
  width: 92%;
  background-color: black;
  align-self: center;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.triangle {
  width: 0px;
  border-style: solid;
  border-width: 20px;
  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) black rgba(0, 0, 0, 0);
  margin-left: 44.4%;
  margin-top: -7.2%;
  background: rgba(0, 0, 0, 0);
}

#vitesse {
  /* Counter-rotate the paragraph to cancel out the parent's rotation */
  transform: rotate(-30deg); /* Counter-rotate by the same amount as .cercle's rotation */
  color: #fff;
}
`

1赞 Temani Afif 11/7/2023 #3

这是一个没有太多代码的简单想法：

.box {
  --s: 15px; /* control the triangle size */

  width: 250px;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  color: #fff;
  padding: var(--s); 
  border-radius: 50%;
  background:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(45deg,#fff,red); /* the gradient coloration */
  position: relative;
  z-index: 0;
}
.box:before {
  content:"";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - var(--s)) 50%;
  clip-path: polygon(0 var(--s),50% 0,100% var(--s),100% 100%, 0 100%);
  background: #000;
  transform-origin: bottom;
  rotate: 20deg; /* control the rotation here */
}


body {
  background: #000;
}

<div class="box">1350</div>

0赞 Tsu'Na 11/8/2023 #4

谢谢你的帮助！

正如我所说，我无法对文本应用计数器旋转，因为在这种情况下文本会闪烁。
经过一夜好眠，阅读@Yftach，解决方案很简单！我创建了另一个 flex 容器，其中有圆圈和文本居中：两者居中，但圆圈不再是文本的父级（文本不在圆圈的左侧，因为我设置了。所以圆圈可以旋转而不会引起文字旋转！:D。position: absolute

    <div class="gauche">
        <div class="cercle" id="fleche">
            <div class="middle">
            </div>
            <div class="triangle">
        
            </div>
        </div>
        <p id="vitesse">1306</p>
    </div>

.gauche{
    order: 0;
    height: 100%;
    aspect-ratio: 1/1;
    background-color: blue;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .cercle{
        /*unchanged*/
    }

    #vitesse{
        position: absolute;
    }
}

上一个：如何在 SASS 中*命名*@keyframes？

下一个：为什么@keyframes动画在链接内的 Safari 中不起作用

使 div 旋转，但保持其内容固定

make a div rotate, but keep its content fixed

评论