CSS3 Tutorial: 2D transform – horizontal en vertical reflection

CSS3 Transform spiegeling

In the tutorial Transforms we saw that with CSS3 we can execute various 2D transformations on DOM elements, such as rotations, scaling, skewing and translations. In this second part of the Transforms tutorial we will show even other transformations that are possible with the transform property like horizontal and vertical refelection. For this we'll use the scaleX en scaleY properties as demonstarted in the example below,

transform

Syntax: none | <transform-function>+
/* CSS3 rules for vertical reflection (horizontal mirror axis) 
als called ‘vertical flip’ genoemd */
	-moz-transform: scaleX(−1);
	-ms-transform: scaleX(−1);
	-o-transform: scaleX(−1);
	-webkit-transform: scaleX(−1);
    transform: scaleX(−1)
    /*For older IE browsers*/
filter: FlipH;        
       -ms-filter: "FlipH";

/* CSS3 rules for horizontal reflection (vertikal mirror axis) 
als called ‘horizontal flip’ genoemd */
	-moz-transform: scaleX(−1);
	-ms-transform: scaleX(−1);
	-o-transform: scaleX(−1);
	-webkit-transform: scaleX(−1);
    transform: scaleX(−1)
    /*For older IE browsers*/
filter: FlipH;        
       -ms-filter: "FlipH";

Example1: Vertical reflection of an image.

De HTML code

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transform </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<img class="flipLogoVert" src="images/transform2_html5_logo.png" alt="HTML5 logo" >
</body>
</html>

The CSS

img.flipLogoVert{
-moz-transform: scaleX(-1); 
-o-transform: scaleX(-1); 
-ms-transform: scaleX(-1);
-webkit-transform: scaleX(-1); 
transform: scaleX(-1);
/*For older IE browsers*/
filter: FlipH;
-ms-filter: "FlipH";
}
HTML5 logo flipped vertical
Image 1. CSS3 Spiegeling met scaleX(-1). Het rechter logo is vertikaal gespiegeld (verticale spiegelas) ten opzichte van het linker logo

Check this example in your browser

Example2: Horizontal reflection of an image.

The HTML code

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Transform </title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="css/articles_styles.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<img class="flipLogoHor" src="images/transform2_html5_logo.png" alt="HTML5 logo" ></body>
</html>

The CSS

img.flipLogoHor{
-moz-transform: scaleY(-1); 
-o-transform: scaleY(-1); 
-ms-transform: scaleY(-1);
-webkit-transform: scaleY(-1); 
transform: scaleY(-1);
/*For older IE browsers*/
filter: FlipV;
-ms-filter: "FlipV";
}
HTML5 logo flipped vertical
Image 2. CSS3 Refection with scaleY(-1). The logo at the right is horizontally refelected relative to the leftlogo

Check this example in your browser

Leave a comment