![]() RotateZ(a) is equivalent to rotate(a) or rotate3d(0, 0, 1, a). If positive, the movement will be clockwise if negative, it will be counter-clockwise. The amount of rotation created by rotateZ() is specified by an angle value expressed in degrees, gradians, radians, or turns. The rotateZ() CSS function defines a transformation that rotates an element around the z-axis without deforming it. More info : /en-US/docs/Web/CSS/transform-function/rotateY rotateZ() Rotates an element around the z-axis. RotateY(a) is equivalent to rotate3d(0, 1, 0, a). The amount of rotation created by rotateY() is specified by an angle value expressed in degrees, gradians, radians, or turns. The rotateY() CSS function defines a transformation that rotates an element around the ordinate (vertical axis) without deforming it. More info : /en-US/docs/Web/CSS/transform-function/rotateX rotateY() Rotates an element around the vertical axis. ![]() RotateX(a) is equivalent to rotate3d(1, 0, 0, a). ![]() The amount of rotation created by rotateX() is specified by an angle value expressed in degrees, gradians, radians, or turns. The rotateX() CSS function defines a transformation that rotates an element around the abscissa (horizontal axis) without deforming it. Rotation (3D) rotateX() Rotates an element around the horizontal axis. More info: /en-US/docs/Web/CSS/transform-function/rotate The axis of rotation passes through an origin, defined by the transform-origin CSS property. (A rotation by 180° is called point reflection.) The amount of rotation created by rotate() is specified by an angle value expressed in degrees, gradians, radians, or turns. The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Libraries like Framer Motion take advantage of this fact to build highly-performant animations without stretching or squashing.Rotation (2D) rotate() Rotates an element around a fixed point on the 2D plane. This is an advanced technique, far beyond the scope of this blog post, but know that it's possible to use scale to increase an element's size without distorting its children. For example, check out this old-timey TV power animation:įor this animation, the squashing effect actually improves the effect!Īnd, if we really don't want our text to squash, we can apply an inverse transform to the child. It may seem like a bummer that scale will stretch/squash the element's contents, but we can actually use this effect to our advantage. This means that the calculations run quicker, leading to smoother motion. With transforms, we can skip a bunch of steps. It's fine to do this once when the page loads, but when we animate something, we need to do all of those calculations many many times a second. Then, the paint algorithms run, figuring out which color every pixel needs to be, and filling it in. If the element has text inside, the line-wrapping algorithm needs to figure out if this new width affects the line breaks. All of the layout algorithms need to re-run, figuring out exactly where this element and all of its siblings should be. Think about how much work is required when we change something like width. Incidentally, this is what makes transform such a good choice for animations! All of these transforms essentially treat our element like a flat image, warping and contorting it as you might in Photoshop. This reveals an important truth about transforms: elements are flattened into a texture.
0 Comments
Leave a Reply. |