神刀安全网

Understanding Basics of CSS Transformations

What are Transformations ?

In Math, A transformation is a general term for four specific ways to manipulate the shape of a point, a line, or shape. The original shape of the object is called the pre-image and the final shape and position of the object is the image under the transformation.

In CSS, The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements. As shown in the above examples.

In this Article we are going to understand the 3 basics of CSS Transformation that is Scale, Translate and Rotate.

Scaling

Scaling Basically means to increase or decrease the size of an object by moving the points (x and y) exponentially i.e. the scale factor will always be the same.

You can change the values of scale function of the transform property and get different results.

In the purple box i’ve added a scale-in flavor whereas in the blue box i used scale-out.

scale

Example Code

Translate

Translate means to move the points of an object in x or y or both.Every Point of the shape must move in the same direction and same distance .Lets see some examples.

TranslateX

TranslateY

TranslateZ

Translate

Example Code

Rotate

"Rotation" means turning around a center. The distance from the center to any point on the shape stays the same.

Clock & Anticlockwise

In the first one the orange box is set to rotate 180 degree in Clockwise. The Second box is set to rotate 180 degree in Anticlockwise.

Rotate

Example Code

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Understanding Basics of CSS Transformations

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮