css3时钟 rotate

CSS3时钟rotate是一种可以用CSS代码实现的时钟效果，它使用了rotate()函数来对样式进行旋转变换。通过对时钟的指针的旋转来实现时钟效果。

.clock{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  position: relative;
  background: #fff;
  border-radius: 50%;
  Box-shadow: 0 0 20px #666;
}

.hour-hand,.minute-hand,.second-hand{
  position: absolute;
  background: #333;
  transform-origin: bottom center;
}

.hour-hand{
  height: 50px;
  width: 10px;
  top: 50px;
  left: 95px;
  transform: rotate(30deg);
}

.minute-hand{
  height: 70px;
  width: 6px;
  top: 40px;
  left: 97px;
  transform: rotate(180deg);
}

.second-hand{
  height: 90px;
  width: 3px;
  top: 20px;
  left: 98.5px;
  transform: rotate(270deg);
}

可以看到，在样式中，我们给时钟创建了三个指针，分别表示小时，分钟，秒钟。每个指针都有一些共同的CSS属性，如position: absolute，background: #333等。我们使用了transform-origin属性来设置指针的旋转中心，使得指针旋转时更加平滑。

在每个指针的transform属性中，我们使用rotate()函数来实现指针的旋转。这个函数的参数为指针所要旋转的角度，例如rotate(30deg)表示将指针旋转30度。

通过以上的CSS代码，我们就可以轻松地创建一个简单的CSS3时钟rotate效果。通过调整指针的旋转角度，可以实现更加细致的时钟效果。