饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

--- css3d_3dtransform函数 [2021/12/11 10:17]
若愚创建
+++ css3d_3dtransform函数 [2021/12/11 10:57] (当前版本)
若愚
@@ 行 1: / 行 1: @@
+# CSS 3D 转换
 ## 3D transform 函数
+###### 目录
+- [介绍](CSS3D/介绍)
+- [透视](CSS3D/透视)
+- **[3D transform 函数](CSS3D/3Dtransform函数)**
+- [卡片翻转](CSS3D/卡片翻转)
+- [立方体](CSS3D/立方体)
+- [盒子](CSS3D/盒子)
+- [旋转木马](CSS3D/旋转木马)
+- [总结](CSS3D/总结)
+- [返回列表](document/css3d)
 作为网页设计师，你可能非常熟悉在X和Y两个维度上工作————在水平和垂直方向定位元素。使用 `perspective`初始化 3D 空间后，我们现在可以使用第三个 Z 维度来转换三个空间维度中的元素。
@@ 行 14: / 行 28: @@
 `rotate`函数围绕相应的轴旋转元素。起初这有点违反直觉，因为你可能会想象`rotateX()`会水平地向左或向右旋转对象。相反，使用`rotateX() `会围绕水平 X 轴旋转元素，因此元素的顶部会向后倾斜和远离，底部更向前靠近观察者。
-翻译Z（-200px）
+![](wiki:css3d-transform.jpg.jpeg)
-翻译Z（200px）
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/NMpVxV)
-旋转X（45度）
-旋转Y（45度）
-旋转Z（45度）
- 在 CodePen 上编辑此演示
 还有几个速记 transform 函数，你可以为所有三个维度设置值：
@@ 行 32: / 行 40: @@
 ## 硬件加速
-这些 3 参数函数还具有触发硬件加速的好处。Dean Jackson，CSS 3D转换规范的作者和WebKit的主要家伙，写道：transform3d()
+这些 3 参数的`transform3d()`函数还具有触发硬件加速的好处。Dean Jackson 作为CSS 3D转换规范的作者和WebKit的核心开发者，曾写道：
-从本质上讲，任何将 3D 操作作为其功能之一的转换都将触发硬件合成，即使实际转换是 2D 转换，或者根本不执行任何操作（例如 ）。请注意，这只是当前的行为，将来可能会改变（这就是为什么我们不记录或鼓励它）。但它在某些情况下非常有用，可以显着提高重绘性能。translate3d(0,0,0)
+**“从本质上讲，任何使用涉及3D 操作函数的转换都将触发硬件合成，即使实际执行的是2D转换，甚至根本不执行任何操作（例如 `translate3d(0,0,0)`）。需要了解的是，这只是当前的用法，将来可能会改变（这就是为什么这种方式没被官方记载或推荐使用）。但它在某些情况下非常有用，可以显着提高重绘性能。
+”**
-这篇笔记写于2010年。从那时起，其他浏览器也采用了这种行为。但是YMMV。浏览器中的硬件加速仍然是一个很少被记录的神秘主题。
+[这篇笔记](http://mir.aculo.us/2010/08/05/html5-buzzwords-in-action/)写于2010年。从那时起，其他浏览器也采用了这种行为。但是可以说这些东西现在应该适合你，但它可能不会一直有效。浏览器中的硬件加速仍然是一个很少被记录的神秘主题。
-为清楚起见，本文中的演示将使用基本的转换函数，但如果您希望提高性能，请尝试使用 。transform3d()
+为清楚起见，本文中的演示将使用基本的转换函数，但如果您希望提高性能，请尝试使用`transform3d()`。
+> 原文： https://3dtransforms.desandro.com/3d-transform-functions
+>
+> 翻译： 若愚@饥人谷

饥人谷Wiki

站点工具

用户工具

页面工具