[分享]css3怎么让正方形均匀旋转

CSS3是前端开发中非常常用的技术，可以实现各种效果。其中，如何让正方形均匀旋转也是一道经典的问题。首先，我们需要创建一个正方形的div，设置它的宽度和高度相等，然后使用CSS3的transform属...

CSS3是前端开发中非常常用的技术，可以实现各种效果。其中，如何让正方形均匀旋转也是一道经典的问题。

首先，我们需要创建一个正方形的div，设置它的宽度和高度相等，然后使用CSS3的transform属性来实现旋转效果。具体代码如下：

.square {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotate(45deg);
} 

上面的代码中，我们创建了一个名为square的div，宽高均为100px，背景色为红色。然后使用transform: rotate(45deg)来实现均匀旋转效果，其中rotate(45deg)表示将div旋转45度。

但是，如果我们想要让正方形均匀旋转，需要在transform中加上一个额外的参数。具体代码如下：

.square {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotate(45deg) translate(-50%, -50%);
} 

上面的代码中，我们在transform中加入了一个translate(-50%, -50%)的参数，这表示将div向上和向左移动50%的宽度和高度，从而实现均匀旋转。

通过这种方式，我们可以轻松实现正方形的均匀旋转效果。