CSS3 - 2DTransform & Transitions w3c
intro | transitions | scale | rotate | translate | skew | origin | examples | browser support
Transform - Skew
Here I have placed the Transform Skew on the box holding the text.
#skewText{
-moz-transform: skew(-15deg, -15deg);
-webkit-transform:skew(-15deg, -15deg);
-ms-transform:skew(-15deg, -15deg);
-o-transform:skew(-15deg, -15deg);
transform:skew(-15deg, -15deg);
}
Skew on Image and Styles
hover over to skew photo
Scott & Juude
This first set of styles will allow animation when the user rolls out:
#skewPhoto{
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
These are the main set of styles that will trigger the skew transform on the hover.
#skewPhoto:hover{
-moz-transform: skew(10deg, 10deg);
-webkit-transform:skew(10deg, 10deg);
-ms-transform:skew(10deg, 10deg);
-o-transform:skew(10deg, 10deg);
transform:skew(10deg, 10deg);
}
Alert
Mobile devices do not responed to the hover therefore you need to click on the image/s in order to see the effect. Even though by clicking on the image you can generate the transform it still does not work correctly on touch devices. Because there is no hover the reverse transform cannot happen when the user rolls off but it is generated when the user click on another transform.