CSS Tutorial
CSS Advanced
CSS3 Tutorial
CSS Responsive
CSS References
CSS tools
CSS Resources
Selected Reading
- CSS - Scrollbars
- CSS - Dimension
- CSS - Outlines
- CSS - Cursors
- CSS - Padding
- CSS - Lists
- CSS - Margins
- CSS - Borders
- CSS - Tables
- CSS - Links
- CSS - Images
- CSS - Text
- CSS - Fonts
- CSS - Backgrounds
- CSS - Colors
- CSS - Measurement Units
- CSS - Inclusion
- CSS - Syntax
- CSS - Introduction
- CSS - Home
CSS Advanced
- CSS - Validations
- CSS - Layouts
- CSS - Printing
- CSS - Aural Media
- CSS - Paged Media
- CSS - Media Types
- CSS - Text Effects
- CSS - @ Rules
- CSS - Pseudo Elements
- CSS - Pseudo Classes
- CSS - Layers
- CSS - Positioning
- CSS - Visibility
CSS3 Tutorial
- CSS3 - Box Sizing
- CSS3 - User Interface
- CSS3 - Multi columns
- CSS3 - Animation
- CSS3 - 3d transform
- CSS3 - 2d transform
- CSS3 - Web font
- CSS3 - Text
- CSS3 - Shadow
- CSS3 - Gradients
- CSS3 - Color
- CSS3 - Multi Background
- CSS3 - Border Images
- CSS3 - Rounded Corner
- CSS3 - Tutorial
CSS Responsive
CSS References
- CSS - Animation
- CSS - Units
- CSS - Web safe fonts
- CSS - Web browser References
- CSS - Color References
- CSS - References
- CSS - Quick Guide
- CSS - Questions and Answers
CSS tools
CSS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
CSS3 - 2d transform
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 −
| Sr.No. | Value & Description |
|---|---|
| 1 | matrix(n,n,n,n,n,n) Used to defines matrix transforms with six values |
| 2 | translate(x,y) Used to transforms the element along with x-axis and y-axis |
| 3 | translateX(n) Used to transforms the element along with x-axis |
| 4 | translateY(n) Used to transforms the element along with y-axis |
| 5 | scale(x,y) Used to change the width and height of element |
| 6 | scaleX(n) Used to change the width of element |
| 7 | scaleY(n) Used to change the height of element |
| 8 | rotate(angle) Used to rotate the element based on an angle |
| 9 | skewX(angle) Used to defines skew transforms along with x axis |
| 10 | 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>
span {
width: 300px;
height: 100px;
background-color: pink;
border: 1px sopd black;
}
span#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Safari */
-webkit-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<span>
Tutorials point.com.
</span>
<span id = "myDiv">
Tutorials point.com
</span>
</body>
</html>
It will produce the following result −
Rotate -20 degrees
Box rotation with -20 degrees angle as shown below −
<html>
<head>
<style>
span {
width: 300px;
height: 100px;
background-color: pink;
border: 1px sopd black;
}
span#myDiv {
/* IE 9 */
-ms-transform: rotate(-20deg);
/* Safari */
-webkit-transform: rotate(-20deg);
/* Standard syntax */
transform: rotate(-20deg);
}
</style>
</head>
<body>
<span>
Tutorials point.com.
</span>
<span id = "myDiv">
Tutorials point.com
</span>
</body>
</html>
It will produce the following result −
Skew X axis
Box rotation with skew x-axis as shown below −
<html>
<head>
<style>
span {
width: 300px;
height: 100px;
background-color: pink;
border: 1px sopd black;
}
span#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Safari */
-webkit-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<span>
Tutorials point.com.
</span>
<span id = "skewDiv">
Tutorials point.com
</span>
</body>
</html>
It will produce the following result −
Skew Y axis
Box rotation with skew y-axis as shown below −
<html>
<head>
<style>
span {
width: 300px;
height: 100px;
background-color: pink;
border: 1px sopd black;
}
span#skewDiv {
/* IE 9 */
-ms-transform: skewY(20deg);
/* Safari */
-webkit-transform: skewY(20deg);
/* Standard syntax */
transform: skewY(20deg);
}
</style>
</head>
<body>
<span>
Tutorials point.com.
</span>
<span id = "skewDiv">
Tutorials point.com
</span>
</body>
</html>
It will produce the following result −
Matrix transform
Box rotation with Matrix transforms as shown below −
<html>
<head>
<style>
span {
width: 300px;
height: 100px;
background-color: pink;
border: 1px sopd black;
}
span#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>
<span>
Tutorials point.com.
</span>
<span id = "myDiv1">
Tutorials point.com
</span>
</body>
</html>
It will produce the following result −
Matrix transforms with another direction.
<html>
<head>
<style>
span {
width: 300px;
height: 100px;
background-color: pink;
border: 1px sopd black;
}
span#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>
<span>
Tutorials point.com.
</span>
<span id = "myDiv2">
Tutorials point.com
</span>
</body>
</html>
It will produce the following result −
Advertisements