CSS Transformation Examples
CSS3 Transitions
- Rotating with CSS Transforms
- Skew with CSS Transforms
- Skew X-Axis with CSS Transforms
- Skew Y-Axis with CSS Transforms
- Scaling with CSS Transforms
- Making it Smaller Too
- Translating with CSS Transforms
All of the examples will use the same HTML and CSS to create a simple box:
This is a box with some text inside it.
div.box { width: 196px; height: 196px; border: solid thin black; background-color: #FCC; padding:2px; }
<div class="box">
<p>This is a box with some text inside it.</p>
</div>
Rotating with CSS Transforms
This is a box with some text inside it.
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
Return to CSS Transformations article.
Skew with CSS Transforms
This is a box with some text inside it.
-moz-transform: skew(5deg,10deg);
-webkit-transform: skew(5deg, 10deg);
-o-transform: skew(5deg,10deg);
-ms-transform: skew(5deg,10deg);
transform: skew(5deg,10deg);
Skew X-Axis with CSS Transforms
This is a box with some text inside it.
-moz-transform: skewX(15deg);
-webkit-transform: skewX(15deg);
-o-transform: skewX(15deg);
-ms-transform: skewX(15deg);
transform: skewX(15deg);
Skew Y-Axis with CSS Transforms
This is a box with some text inside it.
-moz-transform: skewY(15deg);
-webkit-transform: skewY(15deg);
-o-transform: skewY(15deg);
-ms-transform: skewY(15deg);
transform: skewY(15deg);
Return to CSS Transformations article.
Scaling with CSS Transforms
This is a box with some text inside it.
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
Making it Smaller Too
This is a box with some text inside it.
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
Return to CSS Transformations article.
Translating with CSS Transforms
This box was moved 100px right and 10px up.
translate(100px,-10px);
-moz-transform: translate(100px,-10px);
-webkit-transform: translate(100px,-10px);
-o-transform: translate(100px,-10px);
-ms-transform: translate(100px,-10px);
transform: translate(100px,-10px);
Translating on One Coordinate (X or Y)
This box was moved 220 px right (→)
translatex(220px);
This box was moved 202 px up (↑)
translatey(-202px);
-moz-transform: translatex(220px);
-webkit-transform: translatex(220px);
-o-transform: translatex(220px);
-ms-transform: translatex(220px);
transform: translatex(220px);
-moz-transform: translatey(-202px);
-webkit-transform: translatey(-202px);
-o-transform: translatey(-202px);
-ms-transform: translatey(-202px);
transform: translatey(-202px);
Return to CSS Transformations article.
