javascript旋转_使用JavaScript将元素旋转到鼠标和触摸位置

javascript旋转

Using CSS transforms, transitions and animation, we can rotate any element on the page, but CSS won’t allow us to do that dynamically, in response to user input. To make that happen, we need JavaScript, combined with the lessons I’ve shown to this point regarding CSS rotation.

使用CSS转换，过渡和动画 ，我们可以旋转页面上的任何元素，但是CSS不允许我们响应用户输入而动态地进行操作。 为了实现这一点，我们需要JavaScript并结合我到目前为止展示的有关CSS轮换的课程。

设置原点 (Setting the Origin)

In many use-cases, an element will rotate around its center point. In CSS, the center of rotation for an element is defined by it’s transform-origin property, which has a default value of center center. However, it’s important to note that the mathematical center of the element - as represented by the default value - may not necessarily be the visual center of an element. This is especially true if the element is asymmetric: for example, a circle with a pointer, as shown in Figure 1.

在许多用例中，元素将绕其中心点旋转。 在CSS中，元素的旋转中心由其transform-origin属性定义，该属性的默认值为center center 。 但是，请务必注意，元素的数学中心(如默认值所表示的)不一定是元素的视觉中心。 如果元素是不对称的，则尤其如此：例如，带有指针的圆，如图1所示。