HTML and CSS Reference
In-Depth Information
To do the same with the matrix() function, the equivalent style in matrix_1.html looks like this:
img:last-child {
transform: matrix(1, 0, 0, 1, -50, 25);
}
The first and fourth arguments indicate a scaling factor of 1 . In other words, the element retains its original
size. The second and third arguments are set to zero, indicating that the element isn't skewed.
Not When using the browser-specific -moz-transform property with firefox 15 and earlier, you need to add px
as the unit of measurement to the last two arguments passed to the matrix() function.
Scaling Elements
The styles in scale_4.html use the scale() function like this:
.scaleimg:hover {
transform: scale(1.5);
}
.noscale.scaleimg:hover {
transform: scale(1);
}
The equivalent styles in matrix_2.html achieve the same effect with the matrix() function:
.scaleimg:hover {
transform: matrix(1.5, 0, 0, 1.5, 0, 0);
}
.noscale.scaleimg:hover {
transform: matrix(1, 0, 0, 1, 0, 0);
}
The fifth and sixth arguments are set to zero, so the image doesn't move. But you can combine scale and
translate transforms in the matrix() function by using nonzero values for the last two arguments.
Flipping Elements
Setting the first and fourth arguments of the matrix() function to a negative value flips an element in the same
way as passing a negative value to scaleX() , scaleY() , or scale() . The following styles in matrix_3.html produce
the same results as scale_5.html and Figure 20-13 :
#horizontal {
transform: matrix(-1, 0, 0, 1, 0, 0);
}
#vertical {
transform: matrix(1, 0, 0, -1, 0, 0);
}
#shrinkflip {
transform: matrix(-.5, 0, 0, -.5, 0, 0);
}
 
 
Search WWH ::




Custom Search