饥人谷Wiki

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

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

--- css3d_透视 [2021/12/10 22:47]
若愚
+++ css3d_透视 [2021/12/11 10:37] (当前版本)
若愚
@@ 行 1: / 行 1: @@
-# 透视
+# CSS 3D 转换
-#### 目录
+## 透视
+###### 目录
 - [介绍](CSS3D/介绍)
 - **[透视](CSS3D/透视)**
-- [3D转换功能](CSS3D/3D转换功能)
+- [3D transform 函数](CSS3D/3Dtransform函数)
 - [卡片翻转](CSS3D/卡片翻转)
 - [立方体](CSS3D/立方体)
@@ 行 9: / 行 11: @@
 - [旋转木马](CSS3D/旋转木马)
 - [总结](CSS3D/总结)
+- [返回列表](document/css3d)
@@ 行 29: / 行 32: @@
 ![](wiki:3d-1.png)
-在 CodePen 上编辑此演示
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/XqMGRB)
 第二种是使用`perspective`属性：
@@ 行 50: / 行 53: @@
 ![](wiki:3d-2.png)
-在 CodePen 上编辑此演示
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/PepLOz)
 这两种格式都会触发3D空间，并且可以产生相同的视觉效果。但这是有区别的。函数表示法便于直接在单个元素上应用 3D 变换（在红色示例中，我将其与`rotateY` 变换结合使用）。
@@ 行 62: / 行 65: @@
 ![](wiki:3d-3.png)
- 在 CodePen 上编辑此演示
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/WJpmdO)
 ```css
@@ 行 76: / 行 79: @@
 ![](wiki:3d-4.png)
- 在 CodePen 上编辑此演示
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/MGpxVG)
 `perspective `的值决定了 3D 效果的强度。可以将其视为从观看者到对象的距离。值越大，距离越远，视觉效果越不强烈。 `perspective: 2000px`产生轻微的3D效果，就好像我们通过双筒望远镜从远处观察物体一样。 `perspective: 100px`产生非常明显的3D效果，就像一只小昆虫看着一个巨大的物体。
@@ 行 89: / 行 92: @@
 ![](wiki:3d-5.png)
- 在 CodePen 上编辑此演示
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/bMqZmr)
+> 原文: https://3dtransforms.desandro.com/perspective
+>
+> 翻译：若愚@饥人谷

饥人谷Wiki

站点工具

用户工具

页面工具