CSS3变形、转换、旋转

前言

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将其隐藏。

---

不难得知，这些操作与过渡和动画的效果是相辅相成的，我们更可以充分发挥想象力去创造出与众不同的空间页面。