Scribd
Upload
0 views

CSS32Dtransforms

The document provides an overview of CSS3 2D transforms, detailing various transformation functions such as translate, scale, rotate, and skew, along with their syntax. It includes examples of how to apply these transformations to HTML elements using CSS, showcasing different effects like rotation and skewing. Additionally, it explains the use of matrix transformations for more complex manipulations of elements.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

CSS32Dtransforms

The document provides an overview of CSS3 2D transforms, detailing various transformation functions such as translate, scale, rotate, and skew, along with their syntax. It includes examples of how to apply these transformations to HTML elements using CSS, showcasing different effects like rotation and skewing. Additionally, it explains the use of matrix transformations for more complex manipulations of elements.

Uploaded by

Suresh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

CSS3 - 2d Transforms

2D transforms are used to re-change the element structure as translate,


rotate, scale, and skew

The following table has contained common values which are used in 2D
transforms

Values Description

matrix(n,n,n,n,n,n) Used to defines matrix transforms with six values

translate(x,y) Used to transforms the element along with x-axis and y-axis

translateX(n) Used to transforms the element along with x-axis

translateY(n) Used to transforms the element along with y-axis

scale(x,y) Used to change the width and height of element

scaleX(n) Used to change the width of element

scaleY(n) Used to change the height of element

rotate(angle) Used to rotate the element based on an angle

skewX(angle) Used to defines skew transforms along with x axis

skewY(angle) Used to defines skew transforms along with y axis

The following examples are shown the sample of all above properties

Rotate 20 degrees
Box rotation with 20 degrees angle as shown below

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: pink;

border: 1px solid black;

div#myDiv {

/* IE 9 */

-ms-transform: rotate(20deg);

/* Safari */

-webkit-transform: rotate(20deg);

/* Standard syntax */

transform: rotate(20deg);

</style>

</head>

<body>

<div>

Tutorials point.com.
</div>

<div id="myDiv">

Tutorials point.com

</div>

</body>

</html>

It will produce the following result −

Rotate -20 degrees


Box rotation with -20 degrees angle as shown below

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: pink;

border: 1px solid black;

div#myDiv {

/* IE 9 */

-ms-transform: rotate(-20deg);

/* Safari */

-webkit-transform: rotate(-20deg);
/* Standard syntax */

transform: rotate(-20deg);

</style>

</head>

<body>

<div>

Tutorials point.com.

</div>

<div id="myDiv">

Tutorials point.com

</div>

</body>

</html>

It will produce the following result −

Skew X axis
Box rotation with skew x-axis as shown below

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: pink;
border: 1px solid black;

div#skewDiv {

/* IE 9 */

-ms-transform: skewX(20deg);

/* Safari */

-webkit-transform: skewX(20deg);

/* Standard syntax */

transform: skewX(20deg);

</style>

</head>

<body>

<div>

Tutorials point.com.

</div>

<div id="skewDiv">

Tutorials point.com

</div>

</body>

</html>

It will produce the following result −

Skew Y axis
Box rotation with skew y-axis as shown below

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: pink;

border: 1px solid black;

div#skewDiv {

/* IE 9 */

-ms-transform: skewY(20deg);

/* Safari */

-webkit-transform: skewY(20deg);

/* Standard syntax */

transform: skewY(20deg);

</style>

</head>

<body>

<div>

Tutorials point.com.
</div>

<div id="skewDiv">

Tutorials point.com

</div>

</body>

</html>

It will produce the following result −

Matrix transform
Box rotation with Matrix transforms as shown below

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: pink;

border: 1px solid black;

div#myDiv1 {

/* 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);

</style>

</head>

<body>

<div>

Tutorials point.com.

</div>

<div id="myDiv1">

Tutorials point.com

</div>

</body>

</html>

It will produce the following result −

Matrix transforms with another direction

<html>

<head>

<style>

div {

width: 300px;

height: 100px;

background-color: pink;

border: 1px solid black;


}

div#myDiv2 {

/* IE 9 */

-ms-transform: matrix(1, 0, 0.5, 1, 150, 0);

/* Safari */

-webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);

/* Standard syntax */

transform: matrix(1, 0, 0.5, 1, 150, 0);

</style>

</head>

<body>

<div>

Tutorials point.com.

</div>

<div id="myDiv2">

Tutorials point.com

</div>

</body>

</html>

It will produce the following result −

You might also like