饥人谷Wiki

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

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

--- css3d_透视 [2021/12/10 22:16]
若愚创建
+++ css3d_透视 [2021/12/11 10:37] (当前版本)
若愚
@@ 行 1: / 行 1: @@
-# CSS 3D 转换简介
+# CSS 3D 转换
-## 目录
+## 透视
+###### 目录
 - [介绍](CSS3D/介绍)
-- [透视](CSS3D/透视)
+- **[透视](CSS3D/透视)**
-- [3D转换功能](CSS3D/3D转换功能)
+- [3D transform 函数](CSS3D/3Dtransform函数)
 - [卡片翻转](CSS3D/卡片翻转)
 - [立方体](CSS3D/立方体)
@@ 行 9: / 行 11: @@
 - [旋转木马](CSS3D/旋转木马)
 - [总结](CSS3D/总结)
+- [返回列表](document/css3d)
+要激活 3D 空间，元素需要透视。可以通过两种方式实现。
+第一种是使用`transform`属性，使用 `perspective()` 作为函数：
+```css
+transform: perspective(400px);
+```
+例如：
+```CSS
+.panel--red {
+  /* perspective function in transform property */
+  transform: perspective(400px) rotateY(45deg);
+}
+```
+![](wiki:3d-1.png)
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/XqMGRB)
+第二种是使用`perspective`属性：
+```css
+perspective: 400px;
+```
+例如：
+```
+.scene--blue {
+  /* perspective property */
+  perspective: 400px;
+}
+.panel--blue {
+  transform: rotateY(45deg);
+}
+```
+![](wiki:3d-2.png)
-## 介绍
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/PepLOz)
-随着CSS转换的引入，元素可以被移动，旋转，倾斜，挤压和拉伸。网页设计师终于能够赶上印刷设计师。借助 CSS 3D 转换，网页设计师可以超越打印工具，探索平面设计的新领域。
+这两种格式都会触发3D空间，并且可以产生相同的视觉效果。但这是有区别的。函数表示法便于直接在单个元素上应用 3D 变换（在红色示例中，我将其与`rotateY` 变换结合使用）。
-在 Web 上渲染 3D 图形已经存在多年。首先是Flash，然后随着`<canvas>`和WebGL的到来出现了Three.js。WebVR和增强现实也即将到来。虽然这些解决方案在生成可探索的3D 效果方面非常出色，但它们对于Web的主要内容（界面）来说可能有些杀鸡用牛刀。其实只需要借助 CSS 3D 转换，前端开发人员就可以通过向传统网站添加新维度来增强其设计。
+但是，当用于多个元素时，效果就不理想了。这是因为每个元素都有自己的视角，自己的消失点。若要解决此问题，可以父元素上使用`perspective`属性，以便每个子元素可以共享相同的 3D 空间。
+```css
+.panel--separate {
+  transform: perspective(400px) rotateY(45deg);
+}
+```
+![](wiki:3d-3.png)
-## 出发点
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/WJpmdO)
-在我们深入探讨第三个维度之前，我们告诉用户如何从此功能中受益。
-一个更真实的场景。CSS 是为设置文档样式而构建的，之后CSS的功能越来越强大。但实际上CSS并不是3D建模的理想选择。我们在使用CSS的3D时应该应该像使用其他CSS功能如媒体查询、渐变和过渡一样 — 把CSS 3D做为增强项。换句话说，在网站原有功能上做出3D过渡效果更好，但不要想着整个网站元素用3D模型来替换。我们有很多机会通过过渡在界面之间使用3D转换。
+```css
+.scene--together {
+  perspective: 400px;
+}
-以早期iOS的天气应用程序为例。该应用程序使用了两个视图：详细信息视图和选项视图。在这两个视图之间切换是通过 3D 翻转过渡完成的。
+.panel--together {
+  transform: rotateY(45deg);
+}
+```
-![](wiki:weather-app-transition.jpg)
+![](wiki:3d-4.png)
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/MGpxVG)
-D变换可能不仅仅是一个华而不实的花瓶。我们可以使用它们来解决实际的界面挑战，并使我们的应用程序更加直观。
+`perspective `的值决定了 3D 效果的强度。可以将其视为从观看者到对象的距离。值越大，距离越远，视觉效果越不强烈。 `perspective: 2000px`产生轻微的3D效果，就好像我们通过双筒望远镜从远处观察物体一样。 `perspective: 100px`产生非常明显的3D效果，就像一只小昆虫看着一个巨大的物体。
-## 当前支持环境
+通过设置`perspective: none` 或者根本不设置`perspective`，你还可以使用没有透视的 3D 变换。如果没有透视，平行平面是正交的，没有消失点。
-CSS 3D转换模块于2009年首次推出。它由Apple的成员撰写，并首先由Safari支持。从那时起，包括Chrome，Firefox，Internet Explorer和Edge在内的所有现代浏览器都增加了支持。查看caniuse.com/#feat=transforms3d上的图表，以检查整个浏览器环境中的最新支持环境。
-截至 2018 年，98% 的浏览器都支持无前缀的 CSS 属性。添加将捕获较旧的浏览器以达到99%。transform-webkit-transform
+默认情况下，3D 空间的消失点位于中心。可以使用` perspective-origin` 属性更改消失点的位置。
-Internet Explorer 11 不支持transform-style： preserve-3d（稍后我们将介绍此属性）。这意味着IE11仍然可以对单个元素使用3D转换，但不能处理嵌套元素来构建本文中介绍的对象。
+```css
+perspective-origin: 25% 75%;
+```
+![](wiki:3d-5.png)
-让我们开始写代码吧。
+[在 CodePen 上编辑此演示](https://codepen.io/desandro/pen/bMqZmr)
-> 原文: https://3dtransforms.desandro.com/
+> 原文: https://3dtransforms.desandro.com/perspective
+>
+> 翻译：若愚@饥人谷

饥人谷Wiki

站点工具

用户工具

页面工具