CSS Transforms Property in Tamil | Translation/Skew/Scale/Rotate | CSS 2D/3D Functions| CSS Tutorial

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. The transform-origin property allows you to change the position of transformed elements. The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. The scale property allows you to change the size of elements. The scale property defines values for how much an element is scaled in x- and y-directions. You can also define how much an element is scaled in z-direction. Scale values can be given as one value, two values, or three values. If one value is given, the element is scaled the same amount in both x- and y-direction. If two values are given, the element is scaled in x- and y-direction individually. If three values are given, the element is scaled in x-, y- and z-direction individually. The skew() function is an inbuilt function which is used to transform an element in the 2D plane. Skew an element means to pick a point and push or pull it in different directions. The rotate property allows you to rotate elements. The rotate property defines a value for how much an element is rotated clockwise around z-axis. To rotate an element around x-axis or y-axis or in other ways, this must be defined. Values for rotate property can be given as one angle, axis name + angle, or three values + angle. If an angle is given, the element is rotated clockwise around z-axis. If axis name + angle is given, the element is rotated clockwise around that given axis. If three values are given + angle, the three values define a vector which the element is rotated around. The perspective property is used to give a 3D-positioned element some perspective. The perspective property defines how far the object is away from the user. So, a lower value will result in a more intensive 3D effect than a higher value. When defining the perspective property for an element, it is the CHILD elements that get the perspective view, NOT the element itself. The perspective-origin property defines at from which position the user is looking at the 3D-positioned element. When defining the perspective-origin property for an element, it is the CHILD elements that will get the effect, NOT the element itself. The transition property is a shorthand property for: The translate property allows you to change the position of elements. The translate property defines x- and y-coordinates of an element in 2D. You can also define the z-coordinate to change position in 3D. Coordinates can be given as only x-coordinates, x- and y-coordinates, or x-, y- and z-coordinates. transition-property transition-duration transition-timing-function transition-delay #csstamil #css #css3 #cssintamil #cssbasics #csstransform #cssanimation #csstutorials #webtechnologies 🔔Like, Subscribe My Channel👍 https://www.youtube.com/channel/UCXJ1Kk2qWIEGbx8t-2ZjHHA?sub_confirmation=1