With CSS3, you can transform the appearance of Web page elements. The skew transform allows you to skew a particular element or group of elements, by supplying a number of degrees to skew along the X and Y axes.
Your code needs to be tailored to the specific browsers supporting CSS3 and you do, of course, need to remember that not all browsers support these properties yet.
The CSS3 skew transform can execute as the user interacts with your pages, and you can optionally include a transition within the effect.
Build an HTML Page
You can use an existing page if you have one you’re working with, but if not use the following HTML5 code outline:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<img src="picture.jpg" alt="picture" class="skewer" />
</body>
</html>We are going to apply the skew effect to an image element, so alter the markup to reflect the name and location of your own image file, which can be any image you have but will be easier to work with if it is relatively small. Include your image name in the “img” tag “src” attribute.
Style the Element
To see the skew transform working, you first need to give your image element some initial style properties. Add the following declarations inside the CSS area within your page head:
img.skewer {
left:100px;
top:150px;
position:absolute;
}This gives us a default position for the image element within the page.
Make the Element Interactive
Rather than simply applying the skew effect straight away, lets make it happen on user interaction. Add the following event attributes to your image element:
onmouseover="this.className='skewer skewed'" onmouseout="this.className='skewer'"Your image element should now look as follows, with your own image indicated in the “src” attribute:
<img src="picture.jpg" alt="picture" class="skewer" onmouseover="this.className='skewer skewed'" onmouseout="this.className='skewer'" />When the user moves their mouse onto the image, the page gives it an extra class name, then removes this name when the user moves their mouse away from the image. This additional class name will allow us to specify the skew transform in a separate CSS section.
Skew the Element
Add a new section in your CSS area as follows:
img.skewed {
/*General*/
transform: skew(30deg, 10deg);
/*Firefox*/
-moz-transform: skew(30deg, 10deg);
/*Microsoft Internet Explorer*/
-ms-transform: skew(30deg, 10deg);
/*Chrome, Safari*/
-webkit-transform: skew(30deg, 10deg);
/*Opera*/
-o-transform: skew(30deg, 10deg);
}Here we are skewing the image element 30 degrees along the X axis and 10 degrees along the Y axis. Open your page in a browser and move your mouse on and off the image to see the effect in action. Notice that you have to provide slightly different versions of the transform effect to accommodate the different browsers your users may have. While you cannot guarantee that they will have a browser that supports CSS3 at all, if they do they should see your effects.
Skew Along Single Axes
You can opt to skew your image along one axis rather than both. To skew along the X axis only, use the following code:
img.skewed {
/*General*/
transform: skewX(30deg);
/*Firefox*/
-moz-transform: skewX(30deg);
/*Microsoft Internet Explorer*/
-ms-transform: skewX(30deg);
/*Chrome, Safari*/
-webkit-transform: skewX(30deg);
/*Opera*/
-o-transform: skewX(30deg);
}To skew only along the Y axis, use the following code:
img.skewed {
/*General*/
transform: skewY(10deg);
/*Firefox*/
-moz-transform: skewY(10deg);
/*Microsoft Internet Explorer*/
-ms-transform: skewY(10deg);
/*Chrome, Safari*/
-webkit-transform: skewY(10deg);
/*Opera*/
-o-transform: skewY(10deg);
}Skew the Element in the Opposite Direction
Notice that your skew effects apply in a clockwise direction. You can also define skew transforms that are anti-clockwise in effect, by supplying negative parameter values in your CSS3 declarations. Alter your code as follows:
img.skewed {
/*General*/
transform: skew(-20deg, -15deg);
/*Firefox*/
-moz-transform: skew(-20deg, -15deg);
/*Microsoft Internet Explorer*/
-ms-transform: skew(-20deg, -15deg);
/*Chrome, Safari*/
-webkit-transform: skew(-20deg, -15deg);
/*Opera*/
-o-transform: skew(-20deg, -15deg);
}Ease the Change
CSS3 provides transition effects that can ease the shift from one set of properties to another. Since our image skew effect is being initiated by user action, we can make use of transitions to achieve a smoother result. Add the following code inside your “img.skewer” CSS section, after the line in which you declared the position:
/*general version*/
transition: 5s ease-in;
/*browser specific versions*/
-moz-transition: 5s ease-in;
-ms-transition: 5s ease-in;
-webkit-transition: 5s ease-in;
-o-transition: 5s ease-in;Test your page in a supporting browser. The transition is a slow one, so wait a moment to see it happening! You can supply various optional parameters when using transitions for your transforms, but in this case we are simply specifying 5 seconds for the effect to elapse together with an easing property. Notice that the effect doesn’t just happen when you roll your mouse over the image element, but also in reverse when you roll it off, rather than the image simply snapping back into place.
Conclusion
When you see visual effects such as the skew transform in action, you start to understand why many developers see the emerging HTML5 and CSS3 effects as a replacement for technologies like Flash. Although full support for CSS3 is still quite a long way off, you can start providing these effects for many users right now.
You can see this tutorial in action on it’s demo page:
http://developerdrive.com/demo/skewing_elements/skewing_elements.html
