====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
css3d_3dtransform函数 [2021/12/11 10:57] 若愚 |
— (当前版本) | ||
---|---|---|---|
行 1: | 行 1: | ||
- | # CSS 3D 转换 | ||
- | ## 3D transform 函数 | ||
- | |||
- | ###### 目录 | ||
- | - [介绍](CSS3D/ | ||
- | - [透视](CSS3D/ | ||
- | - **[3D transform 函数](CSS3D/ | ||
- | - [卡片翻转](CSS3D/ | ||
- | - [立方体](CSS3D/ | ||
- | - [盒子](CSS3D/ | ||
- | - [旋转木马](CSS3D/ | ||
- | - [总结](CSS3D/ | ||
- | - [返回列表](document/ | ||
- | |||
- | |||
- | 作为网页设计师,你可能非常熟悉在X和Y两个维度上工作————在水平和垂直方向定位元素。使用 `perspective`初始化 3D 空间后,我们现在可以使用第三个 Z 维度来转换三个空间维度中的元素。 | ||
- | |||
- | 3D 变换使用与 2D 变换相同的`transform `属性。如果你熟悉 2D 变换,也会熟悉基础的3D变换。 | ||
- | |||
- | - `rotateX( angle )` | ||
- | - `rotateY( angle )` | ||
- | - `rotateZ( angle )` | ||
- | - `translateZ( tz )` | ||
- | - `scaleZ( sz )` | ||
- | |||
- | 而`translateX()`沿水平 X 轴定位元素,`translateZ()`则沿 Z 轴定位元素,Z 轴在 3D 空间中从前到后运动。正值让元素更靠近观察者,负值让元素看起来更远。 | ||
- | |||
- | `rotate`函数围绕相应的轴旋转元素。起初这有点违反直觉,因为你可能会想象`rotateX()`会水平地向左或向右旋转对象。相反,使用`rotateX() `会围绕水平 X 轴旋转元素,因此元素的顶部会向后倾斜和远离,底部更向前靠近观察者。 | ||
- | |||
- | ![](wiki: | ||
- | |||
- | |||
- | [在 CodePen 上编辑此演示](https:// | ||
- | |||
- | 还有几个速记 transform 函数,你可以为所有三个维度设置值: | ||
- | |||
- | - `translate3d( tx, ty, tz )` | ||
- | - `scale3d( sx, sy, sz )` | ||
- | - `rotate3d( rx, ry, rz, angle )` | ||
- | |||
- | ## 硬件加速 | ||
- | 这些 3 参数的`transform3d()`函数还具有触发硬件加速的好处。Dean Jackson 作为CSS 3D转换规范的作者和WebKit的核心开发者,曾写道: | ||
- | |||
- | |||
- | **“从本质上讲,任何使用涉及3D 操作函数的转换都将触发硬件合成,即使实际执行的是2D转换,甚至根本不执行任何操作(例如 `translate3d(0, | ||
- | ”** | ||
- | |||
- | [这篇笔记](http:// | ||
- | |||
- | 为清楚起见,本文中的演示将使用基本的转换函数,但如果您希望提高性能,请尝试使用`transform3d()`。 | ||
- | |||
- | > 原文: https:// | ||
- | > | ||
- | > 翻译: 若愚@饥人古 | ||