pageXOffset and pageYOffset are subtracted in case the page has been scrolled. This provides is with the center of the element relative to the page, rather than relative to to the element’s own top left corner. PointerBox = pointer.getBoundingClientRect(),ĬenterPoint = window.getComputedStyle(pointer).transformOrigin,ĬenterY = pointerBox.top + parseInt(centers) - window.pageYOffset,ĬenterX = pointerBox.left + parseInt(centers) - window.pageXOffset, Var pointer = document.getElementById("pointer"), We need to find the centering information in JavaScript, since our script will also need to know the transform-origin of the element in order to do the calculations that follow. Note that the transform-origin can also be set with percentages for responsive designs, as shown in the associated CodePen demo.
Touch-action: none is used to prevent the default touch behaviour in IE on devices with touch support. For the element shown in Figure 1, the CSS is: So, before rotating an element dynamically with JavaScript, it’s important to set the transform-origin correctly, followed by testing it by using different values for transform: rotate(). CSS will always use the mathematical center as the transform-origin value by default This is especially true if the element is asymmetric: for example, a circle with a pointer, as shown in Figure 1.įigure 1: Mathematical center (left) vs. 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.
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. In many use-cases, an element will rotate around its center point. To make that happen, we need JavaScript, combined with the lessons I’ve shown to this point regarding CSS rotation.
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.
0 kommentar(er)
