CSS中怎样随机获取旋转角度

CSS中旋转是一种常见的变换操作，但如果想要让旋转角度随机变化怎么办？今天我们就来了解一种通过伪元素实现随机旋转的方法。

我们可以使用CSS的transform属性来实现元素旋转，其中rotate可以控制旋转的角度。而伪元素可以为元素添加虚拟的子元素，常见的伪元素有::before和::after。我们可以使用伪元素来为元素添加随机旋转的效果。

.my-element::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: rotate(
    /* 生成-180到180之间的随机数 */
    calc(-180deg + 360deg * var(--random))
  );
}

/* 使用变量存储随机数，避免每次都重新计算 */
.my-element {
  --random: calc(var(--seed) * 12345 % 10000 / 10000);
  --seed: calc(var(--seed) * 12345 % 10000);
  position: relative;
  margin: 20px;
  border: 1px solid gray;
  padding: 20px;
  text-align: center;
} 

上面的代码中，我们使用::before添加了一个虚拟的子元素，并使用transform属性为其设置了旋转角度。其中，calc(-180deg + 360deg * var(--random))可以生成-180到180之间的随机数作为旋转角度。而变量--random则通过calc(var(--seed) * 12345 % 10000 / 10000)生成。这样可以确保每次旋转都是随机的，而不是每次刷新都变化。

接下来，我们可以将元素position设置为relative，并将::before的position设置为absolute，这样就可以让其相对于元素进行旋转，而不是相对于父元素。

最后，我们在HTML中添加一个<div class="my-element">元素，就可以看到其随机旋转的效果了。

总体来说，这是一种利用伪元素和变量来实现CSS随机旋转的方法，可以为网页增加更加丰富的动态效果。