css点击旋转中心设置

CSS点击旋转中心设置是一种非常实用的技巧，可以帮助我们在网页中实现更加炫酷的效果。它能够让我们通过点击某个元素来改变它的旋转中心，从而达到不同的旋转效果。

/* CSS代码 */
.box {
  
  width: 200px;
  
  height: 200px;
  
  background-color: #f00;
  
  transform-origin: 50% 50%;
}
.rotate {
  
  transform: rotate(30deg);
}
 

上面的代码中，我们定义了一个名为“box”的元素，设置了它的宽度、高度和背景色。同时，我们使用了CSS3的transform-origin属性来设置它的初始旋转中心为元素的中心点。

接下来，我们定义了一个名为“rotate”的类名，其中使用了CSS3的transform属性来实现旋转。这里我们设置了旋转角度为30度。

当我们点击box元素时，我们可以通过JavaScript来动态添加或删除rotate类名，从而改变box元素的旋转效果。

/* JavaScript代码 */
var box = document.querySelector('.box');
box.onclick = function() {
  
  if(box.classList.contains('rotate')) {
  
   
   box.classList.remove('rotate');
  
}
 else {
  
   
   box.classList.add('rotate');
  
}
}
 

上面的JavaScript代码中，我们通过querySelector函数获取了名为“box”的元素，并给它添加了一个onclick事件。当点击box元素时，我们判断它是否包含rotate类名，如果有就将其删除，否则将其添加上去。

这样，我们就可以通过简单的CSS样式和JavaScript代码来实现一个点击旋转中心设置的效果了。当然，这只是其中的一个示例，实际使用时可以根据具体需求进行更改和扩展。