2D and 3D transforms

2D and 3D Transforms

2D transforms

  • As we know, in CSS, we can do every type of decoration or design to an element. Sometimes we have to decorate an element by its shape, size, and position. There we can use the transformation property. In 2D transformation, an element can be arranged along with its X-axis and Y-axis. There are six main types of transformation.
  • translate()
  • rotate()
  • scale()
  • skewX()
  • skew()
  • matrix()

translate()

When we need to move an element along with its X-axis and Y-axis from its actual position then we use translate().

Ex-

<!DOCTYPE html>

<html>

 

<head>

<title>2D Transform</title>

<style>

.trans {

font-size: 35px;

margin: 10px 0;

margin-left: 80px;

}

 

img {

border: 1px solid black;

transition-duration: 2s;

-webkit-transition-duration: 2s;

}

 

img:hover {

transform: translate(100px, 100px);

 

/* prefix for IE 9 */

-ms-transform: translate(100px, 100px);

 

/* prefix for Safari and Chrome */

-webkit-transform: translate(100px, 100px);

}

</style>

</head>

 

<body>

<div class=”trans”>Translate() Method</div>

<imgsrc=

“https://media.higher.org/wp-content/uploads/forest-9.png”

alt=”GFG” />

</body></html>

rotate()

This is used to rotate an element clockwise or anti-clockwise along with the degree value as per our requirements.

Ex-

<!DOCTYPE html>

<html>

 

<head>

<title>2D Transform</title>

<style>

img {

border: 1px solid black;

}

 

img:hover {

 

/* IE 9 */

-ms-transform: rotate(20deg);

 

/* Safari */

-webkit-transform: rotate(20deg);

 

/* Standard syntax */

transform: rotate(20deg);

}

 

.transs {

font-size: 25px;

text-align: center;

margin-top: 100px;

}

</style>

</head>

 

<body>

<div class=”transs”>Rotation() Method</div>

<imgsrc=

“https://media.rivers.org/wp-content/uploads/nomain-9.png”

alt=”GFG” />

</body>

 

</html>

scale()

When we need to increase or decrease the size of an element, then we use this property. Because sometimes, the real image size can’t fit as per the height and width. So we have to change the size as per height and width.

Ex-

<!DOCTYPE html>

<html>

 

<head>

<title>2D Transform</title>

<style>

img {

border: 1px solid black;

}

 

img:hover {

/* IE 9 */

-ms-transform: scale(1, 2);

/* Safari */

-webkit-transform: scale(1, 1);

/* Standard syntax */

transform: scale(1, 2);

}

 

.transss {

font-size: 25px;

text-align: center;

margin-top: 100px;

}

</style>

</head>

<body>

<div class=” transss “>Scale() Method</div>

<imgsrc=

“https://media.fgklf.org/wp-content/uploads/gh-9.png”

alt=”GFG” />

</body></html>

skewX()

This method is used to skew an element. It happens on X-axis.

Ex-

<!DOCTYPE html>

<html>

 

<head>

<title>2D Transform</title>

<style>

img {

border: 1px solid black;

}

 

img:hover {

 

/* IE 9 */

-ms-transform: skewX(20deg);

 

/* Safari */

-webkit-transform: skewX(20deg);

 

/* Standard syntax */

transform: skewX(20deg);

}

 

.tranns {

font-size: 25px;

text-align: center;

margin-top: 100px;

}

</style>

</head>

 

<body>

<div class=” tranns “>skewX() Method</div>

<imgsrc=

“https://media.fgf.org/wp-content/uploads/jhk-9.png”

alt=”GFG” />

</body>

 

</html>

skewY()

This method is used to skew an element. It happens on Y-axis.

Ex-

<!DOCTYPE html>

<html>

 

<head>

<title>2D Transform</title>

<style>

img {

border: 1px solid black;

}

 

img:hover {

 

/* IE 9 */

-ms-transform: skewY(20deg);

 

/* Safari */

-webkit-transform: skewY(20deg);

 

/* Standard syntax */

transform: skewY(20deg);

}

 

.ttrans {

font-size: 25px;

text-align: center;

margin-top: 100px;

}

</style>

</head>

 

<body>

<div class=” ttrans “>skewY() Method</div>

<imgsrc=”https://media.dfgv.org/wp-content/uploads/joy-9.png” alt=”GFG” />

</body></html>

skew()

This method skews an element in both X-axis and the Y-axis. The degree value can be the same or different as per our requirements.

Ex-

<!DOCTYPE html>

<html>

 

<head>

<title>2D Transform</title>

<style>

img {

border: 1px solid black;

}

 

img:hover {

 

/* IE 9 */

-ms-transform: skew(20deg, 10deg);

 

/* Safari */

-webkit-transform: skew(20deg, 10deg);

 

/* Standard syntax */

transform: skew(20deg, 10deg);

}

 

.transform {

font-size: 25px;

text-align: center;

margin-top: 100px;

}

</style>

</head>

 

<body>

<div class=”transform”>skew() Method</div>

<imgsrc=

“https://media.rkljgnmkl.org/wp-content/uploads/fgt-9.png”

alt=”GFG” />

</body>

</html>

matrix()

It is used when we need to use all the methods of 2D transformation properties in a single page. We can take all six properties here like matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ).

Let’s take en example –

Ex-

<!DOCTYPE html>

<html>

 

<head>

<title>2D Transform</title>

<style>

img {

border: 1px solid black;

}

 

img:hover {

 

/* IE 9 */

-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);

 

/* Safari */

-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);

 

/* Standard syntax */

transform: matrix(1, -0.3, 0, 1, 0, 0);

}

 

.trans1 {

font-size: 25px;

text-align: center;

margin-top: 100px;

}

</style>

</head>

 

<body>

<div class=”trans1″>matrix() Method</div>

<imgsrc=

“https://media.dv.org/wp-content/uploads/fgrf-9.png”

alt=”GFG” />

</body>

</html>

3D transforms

In the above section, we learned that we could work on both X-axis and Y-axis in 2D transformation. But in 3D transformation, we can work with Z-axis also.

The rotate function

It allows us to work with Z-axis.

Ex-

<style>

.standard {

background-color: aliceblue;

border: 1px solid black;

width: 300px;

padding: 25px;

margin-top: 20px;

}

 

.standard.rotate {

transform: rotateZ(90deg);

}

</style>

<div class=”standard”>

A standard element

</div>

<div class=”standard rotate”>

Element rotated in Z-axis.

</div>

Transform Properties

Transform => We can change by 2D or 3D transformation.

transform-origin => To change the position of transformed elements.

transform-style => How nested elements can be rendered in 3D view.

perspective-origin => Bottom position of 3D elements can be determined.

backface-visibility=> The element can be visible or not.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *