Results 1 - 20 of 28

Using CSS transforms

By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.
Advanced CSS CSS Transforms Guide

rotate()

The rotate() CSS function defines a transformation that moves the element around a fixed point (as specified by the transform-origin property) without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise. A rotation by 180° is called point reflection.
CSS CSS Transforms NeedsCompatTable Reference

rotate3d()

The rotate3d() CSS function defines a transformation that moves the element around a fixed axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
CSS CSS Transforms NeedsCompatTable Reference

rotateY()

The rotateY()CSS function defines a transformation that moves the element around the ordinate without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
CSS CSS Transforms NeedsCompatTable Reference

rotateZ()

The rotateZ()CSS function defines a transformation that moves the element around the z-axis without deforming it. The amount of movement is defined by the specified angle; if positive, the movement will be clockwise, if negative, it will be counter-clockwise.
CSS CSS Transforms NeedsCompatTable Reference

scale()

The scale() CSS function modifies the size of the element. It can either augment or decrease its size and as the amount of scaling is defined by a vector, it can do so more in one direction than in another one.
CSS CSS Transforms NeedsCompatTable Reference

scale3d()

The scale3d() CSS function modifies the size of an element. Because the amount of scaling is defined by a vector, it can resize different dimensions at different scales.
CSS CSS Transforms NeedsCompatTable Reference

scaleX()

The scaleX() CSS function modifies the abscissa of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.
CSS CSS Transforms NeedsCompatTable Reference

scaleY()

The scaleY() CSS function modifies the ordinate of each element point by a constant factor except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.
CSS CSS Transforms NeedsCompatTable Reference

scaleZ()

The scaleZ() CSS function modifies the z-coordinate of each element point by a constant factor, except if this scale factor is 1, in which case the function is the identity transform. The scaling is not isotropic and the angles of the element are not conserved.
CSS CSS Transforms NeedsCompatTable Reference

skew()

The skew() CSS function is a shear mapping, or transvection, distorting each point of an element by a certain angle in each direction. It is done by increasing each coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
CSS CSS Transforms NeedsCompatTable Reference

skewX()

The skewX() CSS function is a horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction. It is done by increasing the abscissa coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
CSS CSS Transforms NeedsCompatTable Reference

skewY()

The skewY() CSS function is a vertical shear mapping distorting each point of an element by a certain angle in the vertical direction. It is done by increasing the ordinate coordinate by a value proportionate to the specified angle and to the distance to the origin. The more far from the origin, the more away the point is, the greater will be the value added to it.
CSS CSS Transforms NeedsCompatTable Reference

translate()

The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.
CSS CSS Transforms NeedsCompatTable Reference

translate3d()

The translate3d() CSS function moves the position of the element in the 3D space. This transformation is characterized by a 3-dimension vector whose coordinates define how much it moves in each direction.
CSS CSS Transforms NeedsCompatTable Reference

translateX()

The translateX() CSS function moves the element horizontally on the plane. This transformation is characterized by a <length> defining how much it moves horizontally.
CSS CSS Transforms NeedsCompatTable Reference

translateY()

The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically.
CSS CSS Transforms NeedsCompatTable Reference

translateZ()

The translateZ() CSS function moves the element along the z-axis of the 3D space. This transformation is characterized by a <length> defining how much it moves.
CSS CSS Transforms NeedsCompatTable Reference

perspective

The perspective CSS property determines the distance between the z=0 plane and the user in order to give to the 3D-positioned element some perspective. Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
CSS CSS Property CSS Transforms Experimental Reference

perspective-origin

The perspective-origin CSS property determines the position the viewer is looking at. It is used as the vanishing point by the perspective property.
CSS CSS Property CSS Transforms Experimental Reference