2D Transforms Archives - Ebhor.com Read The Latest Post Java, Css, Html, Php learning articles Tue, 19 Apr 2022 11:26:31 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 https://www.ebhor.com/wp-content/uploads/2021/05/ebhor_logo_100x.jpg 2D Transforms Archives - Ebhor.com 32 32 CSS 2D Transforms https://www.ebhor.com/css-2d-transforms/ Fri, 03 Aug 2018 11:11:20 +0000 http://ebhor.com/?p=3123 CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D. Transformation allows to rotate, translate, scale, and skew elements. In this, we will learn about only 2D transformation. In the 2D transformation, the effects are produced ... Read more

The post CSS 2D Transforms appeared first on Ebhor.com.

]]> CSS3 provides the facility to change shape, size, and position of the element with the help of transform property. There are two types of transformations namely, 2D and 3D.

Transformation allows to rotate, translate, scale, and skew elements.

In this, we will learn about only 2D transformation.

In the 2D transformation, the effects are produced with the help of x-axis (horizontal effects) and y-axis (vertical effects).

The list of 2D transformations methods are as follows:

Translate

  1. translate(X, Y) – This method transforms the element along x-axis and y-axis.
  2. translateX(X) – This method transforms the element along the x-axis.
  3. translateY(Y) – This method transforms the element along y-axis.

These methods take values as lengths and percentages. The default value is 0.

CSS TranslateX(X) Example

CSS TranslateX(X) Example
Fig: CSS TranslateX(X) Example
.transform{
            -webkit-transform: translateX(130px);
            -moz-transform: translateX(130px);
            -ms-transform:  translateX(130px);
            -o-transform:  translateX(130px);
            transform:   translateX(130px);
            }
Try it

Rotate

  1. rotate(X, Y) – This method rotates the element along x-axis and y-axis.
  2. rotateX(X) – This method rotates the element along x-axis.
  3. rotateY(Y) – This method rotates the element along y-axis.

These methods take values as angles. The default value is 0.

The positive value represents clockwise rotation and the negative value represents anti-clockwise direction.

.transform {
         -moz-transform: rotate(10deg);
         -webkit-transform: rotate(10deg);
         -o-transform: rotate(10deg);
         -ms-transform: rotate(10deg);
         transform: rotate(10deg);
         }
Run

Scale

  1. scale(X, Y) – This method changes the height and width of the element.
  2. scaleX(X) – This method changes the width of the element.
  3. scaleY(Y) – This method changes the height of the element.

Skew

  1. skew(X, Y) – This method distorts the element along x-axis and y-axis.
  2. skewX(X) – This method distorts the element along x-axis. 
  3. skewY(Y) – This method distorts the element along y-axis.

These methods take values as angles.

Matrix

The matrix method combines the 2D transform methods to be applied as one. 

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

The transform properties supported in 2D transformations are –

  1. transform : Applies effect to an element 
  2. transform-origin : Allows to change the position

The post CSS 2D Transforms appeared first on Ebhor.com.

]]>