css怎么定义中心点旋转 |css3多张图片切换效果

首先，大家需要定义一个元素，并对其进行样式设置。例如：

<div class="rotate-elem">这是一个需要旋转的元素</div>.rotate-elem {
width: 100px;
height: 100px;
background-color: #ff9900;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
/*以上为设置元素样式*/
transform-origin: center;
/*定义拓展点为中心点*/
}

上述代码中，大家首先定义一个宽高为100px的div元素，并通过position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;的设置将元素放置在页面中心。接着，大家设置了transform-origin属性，并将其值设为center，这样就定义了元素的拓展点为中心点。

接下来，大家需要设置旋转角度。此处大家设置一个点击事件，当点击元素时，元素就会按照360度自转一圈。代码如下：

<div class="rotate-elem">这是一个需要旋转的元素</div>var rotateElem = document.querySelector(".rotate-elem");
rotateElem.addEventListener("click", function() {
rotateElem.style.transform = "rotate(360deg)";
});.rotate-elem {
width: 100px;
height: 100px;
background-color: #ff9900;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
/*以上为设置元素样式*/
transform-origin: center;
/*定义拓展点为中心点*/
}

上述代码中，大家通过querySelector方法获取到了类名为rotate-elem的元素，然后为其设置了一个点击事件。当点击元素时，元素将进行360度的旋转，不断自转，直到旋转一圈。旋转角度通过transform属性的rotate方法来进行设置，括号内部的参数即为旋转的角度，单位为deg。

最后，大家已经成功地实现了中心点旋转效果。实际上，通过CSS中的transform-origin属性，大家还能够定义元素的拓展点，从而实现各种不同的旋转效果。这是一项非常有趣和实用的技能，希望大家能够好好学习，用心体会。