HTML and CSS Reference
In-Depth Information
Matrix3D
works by specifying a 3D transformation on an element as a 4x4 matrix with independent quadrants
accessible to editing. Let's take a look at working with the
Matrix3D
property in CSS:
#someElement {
matrix3d(m00, m01, m02, m03, m10, m11, m12, m13, m20, m21, m22, m23, m30, m31, m31, m33)
}
This may seem a bit complicated with that many parameters, but Table
12-1
will help you understand what
portion of the matrix you can update. Pay close attention to the parameter number and the quadrant in the table.
Think of this table as an overlay for any DOM object, and you'll understand which portion of the image you'll be
adjusting based on the parameters you pass.
Table 12-1.
Matrix3D Grid Example
0,0
1,0
2,0
3,0
0,1
1,1
2,1
3,1
0,2
1,2
2,2
3,2
0,3
1,3
2,3
3,3
Using
Matrix3D
can get overwhelming if you're new to it, so I suggest bookmarking a very useful online tool
when working with it. Specifically, check out
http://cssglue.com/matrix
, which allows you to edit and view updates
in real time.
Masks
Masks in CSS3 (the proposal is by Webkit and being considered for W3C standardization) are another great
advancement in CSS to take advantage of. Masks are a very popular tool for many designers coming from a
background of designing ads using Flash. Using CSS masks, you can do some very nifty image trickery by showing just
the portions of the image you want to make visible to a viewer and hiding other areas. Masks allow nondestructive
manipulation of an image and are really great for saving k-weight in a browser. They give you the ability to save images
in the JPEG format, which significantly saves on k-weight as opposed to PNGs. Saving as a JPEG preserves image
fidelity but does not retain the alpha transparency layer present in PNG files. For this, you can leverage the masks to
make a clean cut over the image, which will give the illusion that the image is transparent (like a PNG) but will save a
lot on the overall file size.
At the time of this writing, masks are supported only in Webkit. With browsers on iOS, Android, and BlackBerry
all supporting it (with a vendor prefix), make sure you have Webkit Nightly installed or a phone handy and follow
along in Listing 12-4.
Listing 12-4.
CSS Masks Example
<html>
<head>
<style type="text/css">
#theImage {
background-image: url(image.jpg);
background-repeat: no-repeat;
width: 504px;
height: 288px;
}
