前言
CSS3的出现为页面开发划出了新的篇章！变形、转换、旋转以及过渡和动画，使得我们不再拘泥于2d思维的想象，而是创造于3d的思维模式。
因此，这篇文章也尤为重要。就例如，你想用HTML做一个稍微倾斜的logo：
image.png
又或者，你希望实现类似这样的移动端菜单跳转功能：
1.gif
那么，我们这一篇文章说明变形、转换、旋转的具体操作，动画和过渡可以看另外两篇：《CSS3动画》、《CSS3过渡》
CSS3 transform 属性
| 属性名称 | 属性描述 |
|---|---|
| none | 无效果 |
| perspective | 透视 |
| translate | 移动 |
| rotate | 旋转，单位deg |
| skew | 倾斜，单位deg |
| scale | 缩放 |
perspective 透视
基于3D效果，即类似于舞台效果，凸显元素运用的涉及3d范畴的操作，例如旋转、基于Z轴移动、基于Z轴倾斜等。
X、Y、Z轴的方向
对于块级元素而言
- 左边界为X轴，此时左边界以右为正方向
- 上边界为Y轴，此时上边界以下为正方向
- 元素的平面对应的轴为Z轴，此时向屏幕拉近（或理解为变大）为正方向
transform-origin 变换的显现位置
-
transform-origin: x-axis y-axis z-axis;
这属性其实不难理解，例如默认的缩放元素的基点，也就是显现的位置是在元素正中央，如果设置transform-origin:left top则显现的过程会从左上角开始，至于显现过程可以利用过渡。
backface-visibility 旋转后背面是否隐藏
如果使用了transform:rotateX(180deg)|rotateY(180deg)，此时面向我们的元素将是它的背面，我们甚至可以利用backface-visibility:hidden将其隐藏。
不难得知，这些操作与过渡和动画的效果是相辅相成的，我们更可以充分发挥想象力去创造出与众不同的空间页面。
网友评论