The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)
138 Chapter 12 Figure 12-2 shows the results of this transformation, along with an untransformed reference. Both examples are id ...
2D Transformations 139 The default point of origin in the CSS transform property is the element’s horizontal and vertical center ...
140 Chapter 12 translate The next function we’ll look at is translate, which moves the element from its default position along t ...
2D Transformations 141 That being the case, you could replicate the transformation shown in Figure 12-5 using the shorthand func ...
142 Chapter 12 scale You can make an element larger or smaller than the original by using scale functions. As with the translate ...
2D Transformations 143 skew To skew an element is to alter the angle of its horizontal or vertical axis (or both axes). As with ...
144 Chapter 12 The skew() Shorthand Function The CSS Transforms module and various online sources also list a short- hand skew() ...
2D Transformations 145 The 2D transformation matrices, and the matrix() function, accept six values, the combination of which ca ...
146 Chapter 12 noTe As I’m using degrees in my examples, make sure your calculator’s trigonometric type is set to degrees if you ...
2D Transformations 147 I know this is all quite complex, but hopefully I’ve simplified it enough for you to understand, without ...
...
13 3D Tr ansformaTions All of the features and functions I’ve dis- cussed in this book so far have involved two dimensions; ever ...
150 Chapter 13 or on the main processor. The result is that 3D-transformed elements usu- ally animate in a way that’s smoother a ...
3D Transformations 151 Illustrating three-dimensional transformation concepts on the printed page is quite hard, so I strongly s ...
152 Chapter 13 E { transform: rotateX(angle); transform: rotateY(angle); transform: rotateZ(angle); } Like the rotate() function ...
3D Transformations 153 The angle value is straightforward, but the x, y, and z values are not quite so simple. Each takes a numb ...
154 Chapter 13 Perspective The next function, perspective(), is actually one of the most important as it creates an artificial v ...
3D Transformations 155 Before I move on, I want to make a slight digression. You may be won- dering why the code contains so muc ...
156 Chapter 13 Figure 13-5: Translation in different directions along the z-axis A shorthand function, translate3d(), is also av ...
3D Transformations 157 As should be fairly clear, this shorthand simply accepts a number for each of the values, acting as a sca ...
«
4
5
6
7
8
9
10
11
12
13
»
Free download pdf