css3 设置旋转点

CSS3提供了一种设置元素旋转点的方法，可以通过transform-origin属性来设置元素旋转点的位置。

transform-origin属性最常用的值为center，即元素的中心点。还有其他可用的值，包括top、left、right、bottom以及用像素、百分比和关键字表示的任何其他位置。

当元素进行旋转变化时，它的旋转点会影响到旋转的方式。例如，如果将旋转点设置为元素的左上角，那么在90度旋转时，元素将围绕左上角旋转，并且将覆盖相邻的元素。

下面是一个使用CSS3设置旋转点的例子：

.box {
    width: 200px;
    height: 200px;
    background-color: red;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
    

在上面的例子中，将旋转点设置为元素的左上角，并沿着45度角旋转元素。

通过设置不同的transform-origin值，可以实现各种不同的旋转效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！