「CSS3 」3D效果 & 透視

William_Sang 發布于2019-08-28 18:19 / 1792人閱讀

摘要：第一種方法將屬性更改為的數值，便可以將這個空間設置為透視投影，即所有子元素僅僅是不包括自身的投影到屏幕的方式變為透視投影。注意，這個透視投影的像平面和平面是重合的，原理圖如下其中，焦點到平面的距離是的值。

隨著瀏覽器的不斷進步和更新，許多的新特性也嶄露頭角。
許許多多以前需要用 gif 圖片或者是 flash 實現的效果，現在使用 CSS 就可以實現了。消耗部分計算能力，從而大大減少了流量的交換。

今天要介紹的是 CSS3 中的3D效果，以及非常新的透視功能。

3D變換效果

CSS3 的3D效果是使用 transform 屬性的 rotateX(Y, Z), translateX(Y, Z), scaleX(Y, Z)方法進行設置的。

一個元素如果進行3D變換，它在3D空間的初始位置是這樣的：

上圖使用了立方體來更好的說明位置，如果只是單單一個元素的話，它的形狀是一個平面區域。

下面來分別介紹一下 transform 屬性的3D相關方法。由于這些方法非常易于理解，所以我不贅述。

rotateX (Y, Z)

這個方法使得元素繞著X、Y或Z軸進行軸旋轉，需要注意的是，所有的旋轉都是以順時針方向為正方向。

translateX (Y, Z)

translateX 和 translateY 和2D空間的平移是一樣的，重點說一下 translateZ。

由于默認開啟的是平行投影，所以當你更改一個元素的Z值的時候，視覺上沒有任何變化。如何開啟透視投影？不急，先慢慢看，后面會介紹到。

scaleX (Y, Z)

在X、Y或Z軸上對圖像進行縮放，不多說。

CSS屬性: transform-style

！這是一個非常重要的屬性，值可以是：

flat(default)

preserve-3d

這里許許多多的文章都沒有說清楚，不才在這里嘗試解釋一下。

設置了 preserve-3d 屬性的元素會生成一個3D的空間，將所有的子元素（不是后代元素）都囊括在這個3D空間內。
對于父元素的 transform 屬性，會應用到生成的3D空間中，對整個空間進行縮放，平移，旋轉。
最后將所有的元素平行投影到屏幕上（不是父元素）。

請自己看上面的一段文字，如果能夠理解，那么嘗試分析 flat：
子元素并沒有在父元素的3D空間內，它們獨立的，各自做自己的3D變換，然后按照先后次序（即translateZ無效）投影到父元素（不是屏幕）上。
由于所有的子元素都投影到父元素上，那么父元素的 transform 屬性在視覺效果上是對父元素這個平面區域進行的。

// DEMO：case1

通過這個DEMO我們可以看到 flat 和 preserve-3d 的區別，更加理解上面的文字。

transform: translateX(10px) rotateZ(90deg);

你以為是先平移10px再相對于以Z軸為旋轉軸旋轉90度嗎？
其實并不是，tranform 的屬性是從右邊的方法依次應用到左邊的方法的。

/*
?* 中場休息: 先好好消化一下上面的內容吧！
?*/

透視投影

透視投影模擬人眼的圖像觀察方式，這種方式能夠對物體的遠近，方位進行判斷，從視覺上來說更加接近人類所熟悉的效果。

perspective: none | ;

transform: perspective() method(p) method(p) ...;

第一種方法：將 perspective 屬性更改為 >0 的數值，便可以將這個空間設置為透視投影，即所有子元素（僅僅是, 不包括自身）的投影到屏幕的方式變為透視投影。

第二種方法：將perspective()方法加入到元素的transform 屬性的第一個（即最后應用），便可以將這個元素（僅僅是這個元素）開啟透視投影。

注意，這個透視投影的像平面和Z=0平面是重合的，原理圖如下：

其中，焦點到z=0平面的距離是 perspective 的值。
從上圖我們可以看出，當 perspective 的值越小的時候，Z值對于視覺效果的影響更加強烈，越大的時候，Z值對于視覺的影響更加細微。一般來說，在500px到1000px的時候視覺上更加合理。

當元素的Z值使得元素在焦點之后，元素則不會被捕捉到。

// DEMO: case2(perspective: 500px;)

可以自己思考一下，左圖中為什么上下兩個面會顯示。（畫出它的投影）

我們還可以調整焦點的位置（默認在中心）：

perspective-origin: x y;

其中x的值可以是: 長度、百分比，left(相當于0)、center(相當于50%, 默認)、right(相當于100%);
其中y的值可以是: 長度、百分比，top(相當于0)、center(相當于50%, 默認)、bottom(相當于100%)。

// DEMO: case3(perspective-origin: 0 0;)

DEMO

[重要提示]請不要忘記推薦和收藏 (╯‵□′)╯︵ ┴─┴

git clone https://github.com/JasonKid/fezone.git

搜索 3D效果 & 透視

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111172.html

帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

Panda 2019-08-29 11:03 評論0 收藏0
帶你玩轉css3的3D！

摘要：透視即是以現實的視角來看屏幕上的事物，從而展現的效果。旋轉則不再是平面上的旋轉，而是三維坐標系的旋轉，就包括軸，軸，軸旋轉。必須與屬性一同使用，而且只影響轉換元素。可自由轉載引用，但需署名作者且注明文章出處。 showImg(https://segmentfault.com/img/bVzJoZ); 話不多說，先上demo 酷炫css3走馬燈/正方體動畫： https://bupt-...

archieyang 2019-08-01 15:32 評論0 收藏0
庫&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

Codeing_ls 2019-08-01 18:22 評論0 收藏0
庫&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括轉換小箭頭三角形媒體查詢等中文指南是當下最熱門的前端資源模塊化管理和打包工具。 nodejs 入門 nodejs 入門教程，大家可以在 github 上提交錯誤 2016 年最好用的表單驗證庫 SMValidator.js 前端表單驗證工具分享淺談前端線上部署與運維說到前端部署，可能大多數前端工程師在工作中都是使用的公司現成的部署系統，與SRE對接、一起完...

xiaowugui666 2019-08-21 18:43 評論0 收藏0
不會做動畫的程序猿不是好的動畫師（如何用css3動畫做動畫）

摘要：一過渡一的作用二的屬性二和動畫一動畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動畫簡例代碼三轉換一轉換縮放移動旋轉設置元素轉換的中心點綜合性寫法二轉換三維坐標系透視呈現位移旋轉一過渡一的作用如果你有一個盒子，他的體內也有個小盒子。 ...

xeblog 2021-11-11 16:55 評論0 收藏0