====== 差别 ======
这里会显示出您选择的修订版和当前版本之间的差别。
两侧同时换到之前的修订记录 前一修订版 后一修订版 | 前一修订版 | ||
css3d_3dtransform函数 [2021/12/11 10:36] 若愚 |
css3d_3dtransform函数 [2021/12/11 10:57] (当前版本) 若愚 |
||
---|---|---|---|
行 1: | 行 1: | ||
+ | # CSS 3D 转换 | ||
## 3D transform 函数 | ## 3D transform 函数 | ||
+ | |||
+ | ###### 目录 | ||
+ | - [介绍](CSS3D/ | ||
+ | - [透视](CSS3D/ | ||
+ | - **[3D transform 函数](CSS3D/ | ||
+ | - [卡片翻转](CSS3D/ | ||
+ | - [立方体](CSS3D/ | ||
+ | - [盒子](CSS3D/ | ||
+ | - [旋转木马](CSS3D/ | ||
+ | - [总结](CSS3D/ | ||
+ | - [返回列表](document/ | ||
+ | |||
+ | |||
作为网页设计师,你可能非常熟悉在X和Y两个维度上工作————在水平和垂直方向定位元素。使用 `perspective`初始化 3D 空间后,我们现在可以使用第三个 Z 维度来转换三个空间维度中的元素。 | 作为网页设计师,你可能非常熟悉在X和Y两个维度上工作————在水平和垂直方向定位元素。使用 `perspective`初始化 3D 空间后,我们现在可以使用第三个 Z 维度来转换三个空间维度中的元素。 | ||
行 17: | 行 31: | ||
- | [在 CodePen 上编辑此演示](<div class=" | + | [在 CodePen 上编辑此演示](https:// |
- | ) | + | |
还有几个速记 transform 函数,你可以为所有三个维度设置值: | 还有几个速记 transform 函数,你可以为所有三个维度设置值: | ||
行 29: | 行 42: | ||
这些 3 参数的`transform3d()`函数还具有触发硬件加速的好处。Dean Jackson 作为CSS 3D转换规范的作者和WebKit的核心开发者,曾写道: | 这些 3 参数的`transform3d()`函数还具有触发硬件加速的好处。Dean Jackson 作为CSS 3D转换规范的作者和WebKit的核心开发者,曾写道: | ||
- | ``` | + | |
- | 从本质上讲,任何使用涉及3D 操作函数的转换都将触发硬件合成,即使实际执行的是2D转换,甚至根本不执行任何操作(例如 `translate3d(0, | + | **“从本质上讲,任何使用涉及3D 操作函数的转换都将触发硬件合成,即使实际执行的是2D转换,甚至根本不执行任何操作(例如 `translate3d(0, |
- | ``` | + | ”** |
- | 这篇笔记写于2010年。从那时起,其他浏览器也采用了这种行为。但是可以说这些东西现在应该适合你,但它可能不会一直有效。浏览器中的硬件加速仍然是一个很少被记录的神秘主题。 | + | |
+ | [这篇笔记](http:// | ||
为清楚起见,本文中的演示将使用基本的转换函数,但如果您希望提高性能,请尝试使用`transform3d()`。 | 为清楚起见,本文中的演示将使用基本的转换函数,但如果您希望提高性能,请尝试使用`transform3d()`。 | ||
+ | > 原文: https:// | ||
+ | > | ||
+ | > 翻译: 若愚@饥人谷 | ||