成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

「CSS3 」3D效果 & 透視

William_Sang / 1826人閱讀

摘要：第一種方法將屬性更改為的數(shù)值，便可以將這個空間設(shè)置為透視投影，即所有子元素僅僅是不包括自身的投影到屏幕的方式變?yōu)橥敢曂队啊Ｗ⒁?，這個透視投影的像平面和平面是重合的，原理圖如下其中，焦點到平面的距離是的值。

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

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

3D變換效果

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

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

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

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

rotateX (Y, Z)

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

translateX (Y, Z)

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

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

scaleX (Y, Z)

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

CSS屬性: transform-style

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

flat(default)

preserve-3d

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

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

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

// DEMO：case1

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

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


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

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

透視投影

透視投影模擬人眼的圖像觀察方式，這種方式能夠?qū)ξ矬w的遠(yuǎn)近，方位進(jìn)行判斷，從視覺上來說更加接近人類所熟悉的效果。

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

第一種方法： 將 perspective 屬性更改為 >0 的數(shù)值，便可以將這個空間設(shè)置為透視投影，即所有子元素（僅僅是, 不包括自身）的投影到屏幕的方式變?yōu)橥敢曂队啊?/p>

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

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

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

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

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

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

我們還可以調(diào)整焦點的位置（默認(rèn)在中心）：

perspective-origin: x y;

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

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

DEMO

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

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

搜索 3D效果 & 透視

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111172.html

相關(guān)文章

  • 帶你玩轉(zhuǎn)css3的3D！

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

    Panda 評論0 收藏0

  • 帶你玩轉(zhuǎn)css3的3D！

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

    archieyang 評論0 收藏0

  • 庫&插件&框架&工具

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

    Codeing_ls 評論0 收藏0

  • 庫&插件&框架&工具

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

    xiaowugui666 評論0 收藏0

  • 不會做動畫的程序猿不是好的動畫師（如何用css3動畫做動畫）

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

    xeblog 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<